将 JSX 对象作为字符串传递答案

【问题标题】：Pass JSX object as a string将 JSX 对象作为字符串传递
【发布时间】：2016-05-10 02:05:44
【问题描述】：

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

【问题讨论】：

标签： reactjs jsx

【解决方案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}/>。

【讨论】：

感谢 Danny，将其包装在组件中是有意义的。

【解决方案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);

【讨论】：

【解决方案3】：

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

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

ReactDOM.render(progressInstance, mountNode);

【讨论】：