Question

我是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>

Answer 1

我可以在这里建议内联样式。您可以创建一个包含所有样式的对象，并将其直接传递给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);

Answer 2

我可能还建议检查一下react-bootstrap： https://react-bootstrap.github.io/

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

ReactDOM.render(progressInstance, mountNode);

Answer 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），您可以使用template literals并将其写得更清晰一点：

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

话虽如此，你应该将prop从其他地方传递给这个组件来控制这个值，这样当它发生变化时，你的组件也是如此。

或者更好的是，可能将此代码包含在<ProgressBar />组件中，该组件可能需要progress道具<ProgressBar progress={75}/>。

将JSX对象作为字符串

3 个答案: