145

この質問はすでに数回尋ねられていることを知っていますが、ほとんどの場合、責任の流れは下降するだけなので、解決策は親でこれを処理することです。ただし、メソッドの 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)}>&times;</a>
      </div>
    );
  }
}


export default ErrorBoxComponent;

そして、親コンポーネントで次のように使用します。

<ErrorBox error={this.state.error}/>

ここ に何を入れるべきですか?、私はすでに試しました:

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode); コンソールに素晴らしいエラーがスローされます:

警告: unmountComponentAtNode(): アンマウントしようとしているノードは React によってレンダリングされたものであり、最上位のコンテナーではありません。代わりに、このコンポーネントを削除するために、親コンポーネントの状態を更新して再レンダリングします。

ErrorBox 状態の着信小道具をコピーし、内部でのみ操作する必要がありますか?

4

5 に答える 5