如何在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）？

回答

相关问题