У меня есть компонент, состояние которого передается в качестве опоры дочернему компоненту. Я заметил, что даже если состояние родителя изменено, дочерний компонент не повторно отображается.Обновление дочернего компонента через изменение реквизита от родителя в реакторе
на основе официальной Реагировать документации для использования 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>
);
}
}
Уверен, что правильное название? Детский компонент называется Dropzone, но его функция рендеринга также отображает дочерний элемент. –
wintvelt