Обновление дочернего компонента через изменение реквизита от родителя в реакторе

Question

У меня есть компонент, состояние которого передается в качестве опоры дочернему компоненту. Я заметил, что даже если состояние родителя изменено, дочерний компонент не повторно отображается.

на основе официальной Реагировать документации для использования shouldComponentUpdate:

«Первый раз, когда внутренний компонент визуализируется, это будет иметь. {Foo: „бар“} в качестве значения реквизита Если пользователь нажмет на якоре состояние родительского компонента будет обновлено до {value: {foo: 'barbar' }}, инициировав процесс повторного рендеринга внутреннего компонента, который получит {foo: 'barbar} в качестве новое значение для опоры

Проблема в том, что поскольку p arent и внутренние компоненты обмениваются ссылкой на тот же объект, когда объект получает мутацию в строке 2 функции onClick, при этом внутренний компонент будет изменен. Итак, когда процесс повторного рендеринга запускается, и он должен принимать значение ComponentUpdate , this.props.value.foo будет равен nextProps.value.foo, потому что на самом деле this.props.value ссылается на на тот же объект, что и nextProps.value.

Следовательно, поскольку мы пропустим изменения на опоре и короткое замыкание процесса повторного рендеринга, пользовательский интерфейс не будет обновляться с «бара» до «Barbar».»

Если я не могу использовать shouldComponentUpdate, как бы я заставить компонент ребенка к засавить основан на изменении реквизита от Родителя?

родитель компонент

Я хочу, чтобы компонент ребенка засавить на основе логического значения дано 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

В детском компоненте вы использовали "showZone" вместо "showDropzone".

Спрашивает