この回答に戻って、私はあなたが通信できる2つのコンポーネントを持つ必要があると言います。これはこれを行うための単純なリアクション方法です。 2つの兄弟コンポーネントを持つ1つのApp
コンポーネントがあることに注意してください。 props
の値をModalコンポーネントに渡し、props
コールバックを兄弟に渡すことによって、モーダルにレンダリングまたはレンダリングを行わせることができます。
class Modal extends React.Component {
render() {
return this.props.modalShow ? (
<div className="modal">
Modal loaded
</div>
) : null;
};
};
class Sibling extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.openModal();
}
render() {
return (
<div>
I am a sibling element.
<button onClick={this.handleClick}>Show modal</button>
</div>
)
};
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modalShow: false,
};
this.openModal = this.openModal.bind(this);
};
openModal() {
this.setState({ modalShow: true });
}
render() {
return (
<div>
<Modal modalShow={this.state.modalShow} />
<Sibling openModal={this.openModal}/>
</div>
)
};
};
ReactDOM.render(
<App />,
document.getElementById('app')
);
ここから、状態は「グローバル」なので、Reduxの使用はずっと簡単です。しかし、その考え方は同じです。親に状態を制御させる代わりに、あなたのレデューサーとアクションを使用してください。私はこれが役立つことを願っています
こんにちは@Chris、これを実装する方法のサンプルコードをしてください?申し訳ありませんが、私はまだこれに新しいです。ありがとう –
私はこの回答をより良いコード例で更新しました。 – Chris