Я новичок в React и пытаюсь передать объект JSX в качестве ширины в полосу выполнения начальной загрузки.

Я не знаю, можете ли вы преобразовать JSX в строку, но как мне задать ширину индикатора выполнения?

        <p>Vat 1 : {details.v1} Litres -  % Full</p> 

            <div className='progress'>
              <div className='progress-bar'
                   role='progressbar'
                   aria-valuenow='70'
                   aria-valuemin='0'
                   aria-valuemax='100'
                  style={{width: '{details.v1}'+'%'}}>
                <span className='sr-only'>{parseFloat(details.v1*10)} % Complete</span>
             </div>
            </div>
1
user1727533 10 Май 2016 в 05:05

3 ответа

Лучший ответ

Я считаю, что вы пытаетесь сделать следующее:

<p>Vat 1 : {details.v1} Litres -  % Full</p> 
<div className='progress'>
  <div
    className='progress-bar'
    role='progressbar'
    aria-valuenow='70'
    aria-valuemin='0'
    aria-valuemax='100'
    style={{width: details.v1 + '%'}}>
  <span className='sr-only'>{parseFloat(details.v1*10)} % Complete</span>
  </div>
</div>

Когда вы находитесь внутри пары фигурных скобок, вы попадаете в контекст javascript, поэтому вы можете опустить любые дополнительные фигурные скобки, если вы не определяете литерал объекта.

Фактически, ваш объект стиля является литералом объекта. Вышеуказанное эквивалентно:

// somewhere up above
var style = {
  width: details.v1 + '%'
};

// later
<p>Vat 1 : {details.v1} Litres -  % Full</p> 
<div className='progress'>
  <div
    className='progress-bar'
    role='progressbar'
    aria-valuenow='70'
    aria-valuemin='0'
    aria-valuemax='100'
    style={style}>
  <span className='sr-only'>{parseFloat(details.v1*10)} % Complete</span>
  </div>
</div>

Кроме того, если вы можете использовать ES6 (ES2015, также известный как «новый» javascript), вы можете использовать шаблонные литералы и напишите их более аккуратно:

style={{width: `${details.v1}%`}}>

Сказав это, вам, вероятно, следует передать prop этому компоненту откуда-то еще, чтобы контролировать это значение, так что, когда оно изменяется, то же самое происходит и с вашим компонентом.

Или еще лучше, может быть, оберните этот код в компонент <ProgressBar />, который может иметь свойство progress, например <ProgressBar progress={75}/>.

0
jaybee 25 Июн 2016 в 08:43

Могу я предложить здесь встроенные стили. Вы можете создать объект со всеми вашими стилями и просто передать его прямо в JSX:

https://facebook.github.io/react/tips/inline-styles.html

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
0
omarjmh 10 Май 2016 в 02:26

Могу я также предложить проверить реакцию-бутстрап: https://react-bootstrap.github.io/

const progressInstance = (
  <ProgressBar now={60} />
);

ReactDOM.render(progressInstance, mountNode);
0
martyman 10 Май 2016 в 02:55