将JSX对象作为字符串传递

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

我相信你想要做的是：

<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}/>。

Answer 2

我可以在这里建议内联样式。你可以有你的所有样式的对象，只是传递直接到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 3

也许我也建议检查出反应的自举： https://react-bootstrap.github.io/

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

ReactDOM.render(progressInstance, mountNode);