React
구성 요소 간 통신
수색…
상태없는 기능 구성 요소 간의 통신
이 예제에서는 Redux
및 React Redux
모듈을 사용하여 응용 프로그램 상태를 처리하고 기능 구성 요소의 자동 다시 렌더링을 수행합니다. 그리고 당연히 React
및 React Dom
완료된 데모를 여기에서 체크 아웃 할 수 있습니다.
아래 예제에서는 세 가지 구성 요소와 하나의 연결된 구성 요소가 있습니다.
UserInputForm :이 구성 요소는 입력 필드를 표시합니다. 필드 값이 변경되면
props
inputChange
메소드 (상위 구성 요소가 제공)를 호출하고 데이터가 제공되면 입력 필드에 표시합니다.UserDashboard :이 요소는 간단한 메시지를 표시하고 또한 둥지
UserInputForm
성분을 또한 통과inputChange
하는 방법을UserInputForm
성분,UserInputForm
구성 요소가 어떤 inturn 부모 구성 요소와 통신하기 위해이 방법을 사용한다.- UserDashboardConnected :이 구성 요소는
ReactRedux connect
메서드를 사용하여UserDashboard
구성 요소를 래핑하기UserDashboard
됩니다. 이렇게하면 상태가 변경 될 때 구성 요소 상태를 쉽게 관리하고 구성 요소를 업데이트 할 수 있습니다.
- 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