修改 React 样式对象似乎会损坏 dom 样式

Question

我很确定我发现了一个 React 错误，但我想 post 在 Github 上提交问题之前先在这里 post 这个问题。

我将 link 简化测试用例，但这是数据流：

你有一个 React 组件，它有一个分配给它的 style={this.state.style} 属性。
你setState这样的样式对象现在
```
style={
  border: "1px solid red"
}
```

你setState给这个样式加一个borderColor属性

style={
  border: "1px solid red"
  borderColor: "blue"
}

稍后，您 setState 删除 borderColor
```
style={
  border: "1px solid red"
}
```

如果你这样做会发生什么？嗯，你的边框变黑了。如果您检查 DOM 以查看应用于元素的样式，它将如下所示：

border-width: 1px;
border-style: solid;
border-image: initial;

不用说，这不是我希望发生的事情。似乎 React 正在执行某种 DOM 样式转换，但它的行为并不恰当。谁能解释为什么会这样？

Here is a codepen 使用简化的测试用例来演示行为。

Answer 1

这是个很有意思的问题。我只能说我已经通过明确设置边框颜色、宽度和样式解决了您的问题。然后根据它的价值切换它。这是 codepen link.

var Test = React.createClass({
  getInitialState: function(){
    return {
      styles: {
        borderWidth: '10px',
        borderStyle: 'solid',
        borderColor: 'red'
      }
    }
  },

  toggle: function() {
    this.setState(function(prevState) {
      var styles = prevState.styles

      if (styles.borderColor === 'red') {
        styles.borderColor = 'blue'
      } else {
        styles.borderColor = 'red'
      }

      console.log('new styles:')
      console.log( JSON.parse( JSON.stringify(styles) ) )

      return {
        styles: styles
      }
    })
  },

  render: function() {
    return (
      <div
        className="test"
        style={this.state.styles}
        onClick={this.toggle}
      >
        click me
      </div>
    );
  }
});

ReactDOM.render(<Test />, document.getElementById("app"));

Answer 2

不幸的是，这是一个 React 错误。

https://github.com/facebook/react/issues/6348

tl;dr 是当删除 borderColor 样式时，React 确实有效地 node.style.borderColor = '' 取消了它，但这从 border shorthand 属性。希望有一天我们能解决它。

如 Andrew 所说，解决方法是单独设置属性。

修改 React 样式对象似乎会损坏 dom 样式

Modifying React style object seems to corrupt dom styles

javascript

reactjs

styled-components