この質問はすでに数回尋ねられていることを知っていますが、ほとんどの場合、責任の流れは下降するだけなので、解決策は親でこれを処理することです。ただし、メソッドの 1 つからコンポーネントを強制終了する必要がある場合があります。私はその小道具を変更できないことを知っています.ブール値を状態として追加し始めると、単純なコンポーネントにとって非常に面倒になり始めます. これが私が達成しようとしているものです:小さなエラーボックスコンポーネントで、「x」で閉じることができます。小道具を介してエラーを受け取ると表示されますが、独自のコードから閉じる方法が欲しいです。
class ErrorBoxComponent extends React.Component {
dismiss() {
// What should I put here?
}
render() {
if (!this.props.error) {
return null;
}
return (
<div data-alert className="alert-box error-box">
{this.props.error}
<a href="#" className="close" onClick={this.dismiss.bind(this)}>×</a>
</div>
);
}
}
export default ErrorBoxComponent;
そして、親コンポーネントで次のように使用します。
<ErrorBox error={this.state.error}/>
ここ に何を入れるべきですか?、私はすでに試しました:
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
コンソールに素晴らしいエラーがスローされます:
警告: unmountComponentAtNode(): アンマウントしようとしているノードは React によってレンダリングされたものであり、最上位のコンテナーではありません。代わりに、このコンポーネントを削除するために、親コンポーネントの状態を更新して再レンダリングします。
ErrorBox 状態の着信小道具をコピーし、内部でのみ操作する必要がありますか?