反应内联样式语法更改

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

反应内联样式语法更改

React inline styles syntax changes

inline-styles

reactjs