Question

我有一个组件，其状态作为prop组件传递给子组件。我注意到即使更改了Parent的状态，也不会重新呈现子组件。

基于使用shouldComponentUpdate的官方React文档：

“第一次渲染内部组件时，它会有{foo：   'bar'}作为价值道具。如果用户点击锚点，则   父组件的状态将更新为{value：{foo：'barbar'   触发内部组件的重新渲染过程，其中   将获得{foo：'barbar'}作为道具的新值。

问题在于，由于父组件和内组件共享一个   当对象在第2行变异时，引用同一个对象   onClick函数，内部组件的prop将改变。   因此，当重新渲染过程开始时，和shouldComponentUpdate   被调用，this.props.value.foo将等于   nextProps.value.foo，因为实际上this.props.value引用了   与nextProps.value相同的对象。

因此，我们会错过道具和短片的变化   电路重新渲染过程，UI不会从'bar'更新   'barbar'。“

如果我不能使用shouldComponentUpdate，我将如何基于来自Parent的道具更改强制子组件重新渲染？

父组件

我希望子组件根据showDropzone的布尔值重新渲染。

     <Dropzone 
      onDrop={this.onDrop} 
      clearFile = {this.clearFile}
      showDropzone = {this.state.filePresent}/>

子组件

export default class Dropzone extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { onDrop } = this.props;
    const {showDropzone} = this.props;
    const {clearFile} = this.props;

    return (
      <div className="file-adder">
          <div className="preview">
            {{showDropzone}? 
            <Dropzone
              onDrop={onDrop}
              ref="dropzone">
            </Dropzone>           
            :<button type="button" 
            className="btn btn-primary"
            onClick={clearFile}>
            Clear File</button>}
        </div>
    </div>
    );
  }
}

Answer 1

在子组件中，您使用了＆＃34; showZone＆＃34;而不是＆＃34; showDropzone＆＃34;。

由于

Answer 2

对不起，您的代码有很多错误

首先（这是一个提示）：

 const { onDrop } = this.props;
 const { showDropzone } = this.props;
 const { clearFile } = this.props;

您只能写一行

 const { onDrop, showDropzone, clearFile } = this.props;

现在您的问题从这里开始：

您在卷曲括号中使用了showDropzone，这是您的问题删除它们

您的错误{{showDropzone}? firstOption : anotherOption }

将是{ showDropzone? firstOption : anotherOption }

另一个错误：

您在内部使用了 Dropzone 组件，这是一个很大的错误

您不能在此处使用{{showDropzone}? <Dropzone {...}/> : anotherOption }的Dropzone组件。您可以在其他组件中使用它

最后，我试图格式化您的代码，使其像这样

父组件

{ this.state.filePresent
   ? <Dropzone onDrop={this.onDrop} />
   : <button
         type="button" 
         className="btn btn-primary"
         onClick={clearFile}
         children="Clear File"
     />
}

儿童能力

class Dropzone extends Component {
  render() {
    const { onDrop } = this.props;

    return (
      <div className="file-adder">
        <div className="preview" onDrop={onDrop} ref="dropzone">
          <p>Hi! This is Dropzone component</p>
        </div>
      </div>
    );
  }
}

export default Dropzone;

在React

2 个答案: