JSXオブジェクトを文字列として渡す

Question

JSXオブジェクトをリアクションとして使って、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コンテキスト内にいるので、オブジェクトリテラルを定義していない限り、中括弧を追加することはできません。

実際には、スタイルオブジェクトは、オブジェクトリテラルであるです。上記と同等です：あなたはES6（ES2015別名「新しい」ジャバスクリプト）を使用することができるしている場合は、template literalsを使用して、もう少しきれいにそれを書くことができ、また

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

：

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);