如何在reactjs中添加內聯樣式寬度：calc（100％/ var）？

for (let i = 0; i < divCount.length; i++) { 
     var radio = divCount[i].getElementsByClassName("radio_count"); 
     for (var index = 0; index < radio.length; index++) { 
      var element: any = radio[index]; 
      console.log(element); 
      var style ="width:calc(100%/" + element + ")"; 
      element.style = style; 
     } 

    }

我想添加內嵌樣式
組動態值在100％分前。寬度：clac（100％/ var）; 我該怎麼做？

來源

2017-06-22 dhrupal Suthar

Template literals應該有所幫助。

<div style={{width: `calc(100%/${yourVariable})`}}></div>

例https://jsfiddle.net/69z2wepo/81579/

來源

2017-06-22 07:48:49 Andrew

但我們可以用$ –

你的意思是我們不能？ $只是模板字符串的語法。試試吧，我固定的錯誤是在第一個變種。 – Andrew

是的，我不使用jQuery。 –

什麼@Andrew寫是正確的，但是這裏有一個非ES2015/ES6版本（這個問題沒有具體說明）：

在反應組件渲染，你可以使用以下JSX：

render: function() { 
    var dynamicWidth = 'calc(100%/' + value + ')'; 
    return (
     <div> 
     <div style={{width: dynamicWidth}}></div> 
     </div> 
    );

基本上這是如何工作的是在每個呈現字符串獲取內插。 @Andrew已經顯示出你所只是提供給做同樣的事情在ES6

calc(100%/${value})更好的語法概念上等同於'calc(100%/' + value + ')'

來源

2017-06-22 09:08:51 bakkal

for (let i = 0; i < divCount.length; i++) { 
     var radio = divCount[i].getElementsByClassName("radio_count"); 
     for (var index = 0; index < radio.length; index++) { 
      var element: any = radio[index]; 
      console.log(element); 
      let width = 100/radio.length; 
      element.style.width=width + "%"; 
     } 
    }

來源

2017-06-22 09:31:11

如果項目真正基於React.js，那麼使用它會更好React的狀態和呈現功能，而不是查詢DOM和_imperatively_變異它。 – bakkal

我使用reactjs與打字稿沒有jQuery。 –

如何在reactjs中添加內聯樣式寬度：calc（100％/ var）？

回答

相關問題