반응 구성 요소 내에서 데이터를 공유하는 방법

이번에는 React 컴포넌트에서 데이터를 공유하는 방법과 React 컴포넌트에서 데이터를 공유할 때 주의할 점에 대해 설명하겠습니다. 다음은 실제 사례입니다.

react-redux를 사용하여 React 구성 요소 데이터 간 데이터 공유를 실현합니다.

1. React-redux를 설치합니다

$ npm i --save react-redux

2. React-redux에서 적절한 구성 요소를 가져오고 Provider의 저장소 속성에 저장소를 할당합니다. Provider가 포함된 루트 구성 요소가 마무리됩니다.

import {Provider,connect} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
 <Wrap/>
</Provider>,document.getElementById('example'))

이런 방식으로 루트 구성 요소의 모든 하위 구성 요소는 저장소의 값을 얻을 수 있습니다

3.connect 루트 구성 요소의 보조 캡슐화

export default connect(mapStateToProps,mapDispatchToProps)(Wrap)

connect는 두 개의 함수를 매개 변수로 받습니다. 하나의 mapStateToProps는 매핑할 저장소 속성을 정의합니다. mapDispatchToProps는 구성 요소의 루트 속성(저장소를 반응 구성 요소에 전달)에 루트 구성 요소 속성으로 사용할 수 있는 작업을 정의합니다(반응 구성 요소의 데이터를 저장소로 전달)

3.

function mapStateToProps(state){
 return {
  name:state.name,
  pass:state.pass
 }
}
function mapDispatchToProps(dispatch){
 
 return {actions:bindActionCreators(actions,dispatch)
 }
}

Put the store in 이름과 패스는 루트 구성 요소의 이름과 패스 속성에 매핑됩니다.

actions는 액션 구성 함수를 포함하는 객체입니다. 루트 구성 요소의 actions 속성에 객체 액션을 바인딩하려면 binActionCreators를 사용하세요.

4. 루트 구성 요소가 하위 구성 요소를 참조하는 경우

5 하위 구성 요소의 작업에서 메서드를 호출하여 저장소의 데이터를 업데이트하세요. <Show name={this.props.name} pass={this.props.pass}></Show>첫번째 액션을 속성으로 전달 하위 구성요소 입력

하위 구성요소는 액션을 생성하기 위해 액션의 메소드를 호출합니다

<Input actions={this.props.actions} ></Input>

bindActionCreators 함수를 사용하기 때문에 액션을 생성한 후 즉시 store.dispatch(action)가 자동으로 호출되어 업데이트됩니다.

이런 식으로 우리는 React를 사용합니다 - redux 모듈은 다양한 React 구성 요소 간의 데이터 공유를 완료합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS를 사용하여 흑백만 남기고 사진 조작

실제 프로젝트에서 vue 구성 요소를 사용하는 방법

위 내용은 반응 구성 요소 내에서 데이터를 공유하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!