Question

我正在尝试在react组件渲染函数中设置styleObj，如下所示：

class ImgFigure extends React.Component {
  render() {
    let styleObj = {};

    // props.arrange is a object like this { pos: { left: '0', top: '0'}}
    if (this.props.arrange.pos) {
      styleObj = this.props.arrange.pos;
    }

    return (
      <figure className="img-figure" style={styleObj}>
        <img src={this.props.data.imageURL} alt={this.props.data.title} />
        <figcaption>
          <h2 className="img-title">{this.props.data.title}</h2>
        </figcaption>
      </figure>
    );
  }
}

但它警告我：

warning.js？0260：44警告：figure传递了一个样式对象以前一直在变异。不推荐使用变异style。考虑事先克隆它。查看render的{{1}}。以前 style：{left：0，top：0}。变异风格：{left：519，top：272}。

我搜索了相关信息，并且在大多数情况下，该风格被指定为“NaN＆＃39;或者添加了其他风格。我不知道我哪里错了，你能帮助我吗？

Answer 1

错误非常自我解释。解决方案可能不是那么多。它告诉你，你传递了一个对象的引用，该对象可能在你用let声明之后发生了变异。正确的方法是将其声明为const。当然，你不能重新分配它，但这没关系，因为你不应该在第一时间。

相反，请考虑一下：

const styleObj = this.props.arrange.pos || {};

甚至更好的是，为组件添加defaultProps属性，并确保this.props.arrange.pos始终至少是一个空对象。

为什么我会收到此警告＆＃39;变体`style`已被弃用＆＃39;在反应组件呈现？

1 个答案: