Question

我很确定我找到了一个React错误，但是我想在Github上提交问题之前在这里发布问题。

我将链接到简化的测试用例，但这是数据流：

您有一个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

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

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

tl; dr表示，当删除borderColor样式时，React有效地node.style.borderColor = ''对其进行了取消设置，但这会从border速记属性中取消某些样式。希望有一天我们能解决它。

如安德鲁所说，一种解决方法是分别设置属性。

Answer 2

这是一个非常有趣的问题。我只能说是我通过明确设置边框的颜色，宽度和样式解决了您的问题。然后根据它的值切换它。这是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"));

修改React样式对象似乎破坏了dom样式

2 个答案: