Question

在我的react应用程序中，某些子元素的背景色是通过state的props给出的。所有颜色的初始值为null，因此元素只是透明的。在进行一些交互和单击之后，用户可以将状态值更改为其他颜色，以便更改背景。

之后，我希望能够将所有颜色都设置为null，但是由于某种原因它不起作用，这是我的代码的一小部分：

 state = { colors: [
              { id: 1, color: null },
              { id: 2, color: null },
              { id: 3, color: null },
              { id: 4, color: null }
                 ]}
 reset = () => {
                let colors = [...this.state.colors]
                colors.forEach(color => color.color = null)
                this.setState({ colors: colors })
                }

状态中的颜色键的值按预期变回空，但是元素的颜色不会消失。如果我尝试做

 colors.forEach(color => color.color = "red")

然后所有颜色实际上都变为红色，但是为什么我不能得到null的相同结果？

Answer 1

使用transparent代替null是可行的。这是一个演示

class Colors extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = { colors: props.colors };
    this.reset = this.reset.bind(this);
  }
  
  reset() {
    const colors = this.state.colors.map(({ id }) => {
      return { id, color: 'transparent' }
    });
    this.setState({ colors });
  }  
 
 render() {
    const colors = this.state.colors;
    return (
      <div>
      {colors.map(({id, color}, i) => {
        return <div key={i} style={{backgroundColor: color}}>{i}</div>
      })}        
      <button onClick={this.reset}>Reset</button>
      </div>
    );
  }
}

const colors = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' }
];

ReactDOM.render(
  <Colors colors={colors} />,
  document.getElementById('container')
);

div {
  height: 20px;
  width: 20px;
  color: black;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

不能用“ null”覆盖backgroundcolor

1 个答案: