将 JSX 对象作为字符串传递

Question

我是 React 的新手，正在尝试将 JSX 对象作为宽度传递到 bootstrap 进度条中。

我不知道你是否可以将 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 又名 "new" javascript），您可以使用 template literals 并将其写得更干净一些：

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

话虽如此，您可能应该从其他地方将 prop 传递给此组件以控制此值，以便当它发生变化时，您的组件也会发生变化。

或者更好的是，也许将此代码包装在一个 <ProgressBar /> 组件中，该组件可能采用 progress 属性，例如 <ProgressBar progress={75}/>.

将 JSX 对象作为字符串传递

Pass JSX object as a string

jsx

reactjs