Question

当我尝试使用内联样式flex属性时，它已更改。这个：

<div style={{ flex: '1' }}></div>

成为

<div style="flex: 1 0 0px;"></div>

我不知道它到底来自哪里。

还是它是React的核心错误？

Answer 1

（已编辑）解释是，React试图变得更聪明并遵循标准，但IE11并未遵循它，或者在flexbox的实现中过于费时。

class Hello extends React.Component {
  render() {
    return (
        <div style={{ display: 'flex', textAlign: 'center' }}>
        <div style={{ flex: '1 0 auto', border: '1px dotted #ccc' }}>
          Hello 
        </div>
        <div style={{ flex: '1 0 auto' }}>
          or 
        </div>          
        <div style={{ flex: '1 0 auto', border: '1px dotted #ccc' }}>
          world 
        </div>        
      </div>
    );
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

https://jsfiddle.net/69z2wepo/313712/（具有讽刺意味的是jsfiddle不支持IE11）

我发现的唯一解决方法是添加flex：1;在由react加载的样式表中。

还在他们的github上创建了一个问题：https://github.com/facebook/react/issues/13859

反应内联样式的语法更改

1 个答案: