如何在 reactjs 中添加内联样式 width:calc(100% / var)？

Question

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

    }

1. 我想添加内联样式
2. 将动态值设置为 100% 除 ex。宽度:clac(100% / var);我怎样才能做到这一点 ？

原文由 Dhrupal Suthar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

模板文字 应该有所帮助。

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

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

原文由 Andrii Starusiev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

@Andrew 写的是正确的，但是这里有一个非 ES2015/ES6 版本（问题没有说明）：

在 React 组件渲染中，您可以使用以下 JSX：

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

基本上，这是如何在字符串被插值的每个渲染器上工作的。 @Andrew 向您展示的只是一种更好的语法，可用于在 ES6 中执行相同的操作

calc(100% / ${value}) 在概念上等同于 'calc(100% / ' + value + ')'

原文由 bakkal 发布，翻译遵循 CC BY-SA 3.0 许可协议