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.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로 전달되고 뷰 레이어에 바인딩됩니다. 첫 번째 단계는 구성 요소

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

를 바인딩한 다음 상위 구성 요소의 를

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

로 변경하는 것입니다. Show/> 구성 요소에서 첨부된 onShow 속성을 해당 콘텐츠에 바인딩합니다. 컴포넌트는

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

이 됩니다. 이렇게 해서 컴포넌트 2의 표시 레이어 데이터가 바인딩되었습니다. 다음으로 상위 레이어 상태의 메시지 내용만 변경하면 됩니다. 바인딩된 표시 레이어 만들기 콘텐츠가 함께 변경됩니다

입력 레이어의 상태(데이터)를 상위 구성 요소로 승격합니다. 다음은 다시 작성된 구성 요소 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}/>
  }
 }

여기에 문제가 있을 수 있습니다. () 및 내용 아니요, 걱정하지 마세요. 계속 읽어보세요

그런 다음 상위 구성 요소에 입력 레이어 하위 구성 요소 1을 다시 작성합니다.

class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  //传进的text是其提升上来的状态,然后再更新父组件的状态
  fn(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    

      /*
       onInp就出现在这里,并绑定一个函数,
       并且有一个content将父组件的状态同步到子组件中
      */
      
     <Show onShow={this.state.message}/>
    
   );
  }
 }

완성된 코드는 다음과 같습니다

// 父组
 class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  onInp(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    

     
     <Show onShow={this.state.message}/>
    
   );
  }
 }
 //child-1
 class Input extends React.Component{
  constructor(...args){
  super(...args);
  }
  fn(ev){
   this.props.onInp(ev.target.value);
  }
  render(){
   return 
  }
 }
 //child-2
 class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

 }
 //最后渲染出
 ReactDOM.render(
  ,
  document.getElementById('app')
 );

위 내용은 React 구성 요소 간의 통신에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!