React
コンポーネント間の通信
サーチ…
ステートレス機能コンポーネント間の通信
この例では、使用になりますRedux
してReact Redux
我々のアプリケーションの状態を処理するためのモジュールを、自動のために私達の機能コンポーネントの再描画。、そしてofcourseのReact
とReact Dom
完成したデモをここでチェックアウトすることができます
以下の例では、3つの異なるコンポーネントと1つの接続されたコンポーネント
UserInputForm :このコンポーネントは入力フィールドを表示します。フィールド値が変更されると、親コンポーネントが提供する
props
inputChange
メソッドを呼び出し、データが提供されている場合は入力フィールドにそれを表示します。UserDashboard :このコンポーネントは、単純なメッセージを表示し、
UserInputForm
コンポーネントをUserInputForm
ます。また、inputChange
メソッドをUserInputForm
コンポーネントにUserInputForm
ます.Unputはこのメソッドを使用して親コンポーネントと通信します。- UserDashboardConnected :このコンポーネントは、
UserDashboard
ReactRedux connect
メソッドを使用してUserDashboard
コンポーネントをラップするだけです。これにより、状態の変更時にコンポーネントの状態を管理してコンポーネントを簡単に更新できます。
- UserDashboardConnected :このコンポーネントは、
- App :このコンポーネントは、
UserDashboardConnected
コンポーネントをレンダリングするUserDashboardConnected
です。
const UserInputForm = (props) => {
let handleSubmit = (e) => {
e.preventDefault();
}
return(
<form action="" onSubmit={handleSubmit}>
<label htmlFor="name">Please enter your name</label>
<br />
<input type="text" id="name" defaultValue={props.data.name || ''} onChange={ props.inputChange } />
</form>
)
}
const UserDashboard = (props) => {
let inputChangeHandler = (event) => {
props.updateName(event.target.value);
}
return(
<div>
<h1>Hi { props.user.name || 'User' }</h1>
<UserInputForm data={props.user} inputChange={inputChangeHandler} />
</div>
)
}
const mapStateToProps = (state) => {
return {
user: state
};
}
const mapDispatchToProps = (dispatch) => {
return {
updateName: (data) => dispatch( Action.updateName(data) ),
};
};
const { connect, Provider } = ReactRedux;
const UserDashboardConnected = connect(
mapStateToProps,
mapDispatchToProps
)(UserDashboard);
const App = (props) => {
return(
<div>
<h1>Communication between Stateless Functional Components</h1>
<UserDashboardConnected />
</div>
)
}
const user = (state={name: 'John'}, action) => {
switch (action.type) {
case 'UPDATE_NAME':
return Object.assign( {}, state, {name: action.payload} );
default:
return state;
}
};
const { createStore } = Redux;
const store = createStore(user);
const Action = {
updateName: (data) => {
return { type : 'UPDATE_NAME', payload: data }
},
}
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('application')
);
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow