React 컴포넌트 간 통신의 예

이 글은 주로 React 컴포넌트 간 통신의 예제 코드를 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

최근에 막 React.js의 UI 프레임워크를 배우기 시작했습니다. 리액트 라이브러리가 주는 가장 큰 느낌은 내가 원할 때 UI 레이어를 완전히 장악할 수 있다는 것입니다. Change the view 뭔가를 사용할 때 this.state에서 상태만 변경하면 됩니다. 나는 데이터 레이어 뷰 레이어에 있는 것들이 조작되는 한 그것들은 바뀔 것이라는 점을 여전히 좋아합니다. DOM의 직접적인 작업을 없앨 수 있습니다. 결국 직접 수행하는 것이 더 복잡할 것입니다. 로직 레이어 js에서 다양한 CSS가 혼합된 string이어야 하는데, 이는 저에게 약간 불편합니다( 이 태그는 JSX에도 섞여 있는데, 레이블이라고 생각하면 안 되고, 문장으로 생각하면 익숙해질 것 같아요.

지난 며칠 동안의 초점으로 돌아가서 반응 구성 요소 간의 상태 전송에 대해 이야기했습니다.

위 코드:

1. 두 개의 하위 구성 요소 child-1과 child-2를 정의합니다.

 //child-1 子组件-1为输入框
  class Input extends React.Component{
   constructor(...args){
   super(...args);
   }
   render(){
    return <input type="text"/>
   }
  }
  //child-2  子组-2为显示框
  class Show extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return <p></p>
   }

  }

2. 컴포넌트

class Parent extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return(
     <p>
      <Input}/>
      <Show/>
     </p>
    );
   }
  }

현재 작업은 컴포넌트 1에 텍스트를 입력하고 동시에 컴포넌트 2에 표시하는 것입니다.

분석: 구성 요소 2를 구성 요소 1과 동기화하려면 구성 요소 1과 2가 모두 상위 구성 요소의 상태를 바인딩하도록 합니다. 이는 두 구성 요소를 모두 제어할 수 있음을 의미합니다. 데이터의 방향은 구성요소 1이 자체 데이터를 상위 레이어로 승격하여 상위 레이어의 상태로 저장하는 것입니다. 상위 레이어의 데이터는 구성 요소 2의 propsproperty를 통해 구성 요소 2로 전달되고 뷰 레이어에 바인딩됩니다.

첫 번째 단계는 먼저 9304e6782376319895a69f5eee4dd6e2 구성요소를 바인딩하는 것입니다. 9304e6782376319895a69f5eee4dd6e2 구성요소로 이동하여 첨부된 onShow 속성을 해당 콘텐츠에 바인딩해 보겠습니다. 9304e6782376319895a69f5eee4dd6e2컴포넌트는

//在父层中的constructor中定义状态为一个空的message，this.state = {message:''}
class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   }

이 됩니다. 이런 식으로 컴포넌트 2의 표시 레이어 데이터가 바인딩되었습니다. 다음으로, 메시지의 내용만 변경하면 됩니다. 부모 레이어 상태에 따라 표시 레이어의 내용이 변경됩니다

입력 레이어의 상태(데이터)를 부모 구성 요소로 승격합니다. 다음은 다시 작성된 구성 요소 1

<Show onShow={this.state.message}/>

입니다. 이 :onInp() 및 콘텐츠가 없으면 문제가 있을 수 있습니다. 걱정하지 마세요.

를 확인한 다음 상위 구성 요소

class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

에서 입력 레이어 하위 구성 요소 1을 다시 작성하세요.

완성된 코드는 이렇습니다.

class Input extends React.Component{
  constructor(...args){
    super(...args);
  }
   //将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp()
  fn(ev){ 
   this.props.onInp(ev.target.value);
  }
  render(){
   //用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数
   return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
  }
 }

위 내용은 모두의 학습에 도움이 되기를 바라며, 또한 Script Home을 응원해 주시길 바랍니다. .

위 내용은 React 컴포넌트 간 통신의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!