Comunicação de componentes no React 01 —— adereços

1. Passando de pai para filho —— adereços

1.1 Exemplo simples – adereços

• Adicione atributos às tags de subcomponentes, personalize os nomes dos atributos e mantenha-os semânticos.
• O código principal do exemplo simples é muito simples. Vamos fazer uma captura de tela primeiro. O código está anexado no final. O que precisa ser observado é: a diferença entre componentes de classe e componentes funcionais é a seguinte:
  
  
  

1.2 adereços podem passar qualquer dado

1.2.1 Passando números, objetos, etc.

• Acima vemos que uma string é passada. Vejamos brevemente o objeto passado, como segue:
  
  
  

1.2.2 Função de transferência

• Veja isso em detalhes abaixo.2. 子传子 + 子传子》, introdução detalhada abaixo.

1.2.3 Modelo de passagem jsx

• do seguinte modo:
  
  

2. De filho para pai + de filho para filho —— adereços

2.1 Passagem de pai para filho – função de transferência

• A importância da função pai-filho reside principalmente em como implementar a função filho-pai através dela.Uma breve olhada na função pai-filho é a seguinte:
  
• O efeito é o seguinte:
  

2.2 Passagem de filho para pai – realizada através da função de passagem de pai para filho

• O seguinte requisito é adicionar dados de cachorro ao componente filho e passar os dados para o componente pai, da seguinte maneira:
  
• Veja o efeito:
  

2.3 Otimização + Zi Chuan Zi (comunicação irmão)

• Os requisitos para a seguinte implementação são: Existe um botão no subcomponente D acima, clique para acionar addDog (ou seja: adicionar um novo cachorro), e isso é refletido em outro subcomponente E.
• Portanto, o processo é: o pai passa a função addDog para o componente filho D, o componente filho D passa os novos dados para o pai ao chamar a função, o addDog do pai atualiza os dados de estado e, em seguida, o componente filho E exibe o mais recente dados dos pais em tempo real.A implementação específica dos dados de estado transmitidos é a seguinte:
  • parent.jx, como segue:
    
  • O componente D é o seguinte:
    
  • No componente E é simples: você pode aceitar diretamente os dados do pai, da seguinte maneira:
    
• O efeito é o seguinte:
  

3. renderizar adereços

3.1 Transferência do conteúdo do corpo da tag em tags de componentes

• Se você deseja passar o conteúdo do corpo da tag na tag do componente, preste atenção ao obtê-lo. O conteúdo passado é colocado no atributo filho dos adereços, da seguinte forma:
  
  
• Se o conteúdo da tag body acima não for love, mas sim outro componente F, que forma um relacionamento pai-filho com ChildE, ele ainda será colocado no atributo children de props, como segue:
  
  

3.2 adereços de renderização

• No item 3.1 acima, o relacionamento pai-filho é formado colocando o componente F no corpo da tag ChildE. Isso pode ser feito de outra forma, que é passando a função de seta, como segue:
  
  

   <div className="childE">
       <ChildE dogList={
        
        this.state.dogList} 
               testJsx={
        
        <p>测试一下传递jsx</p>}
               render={
        
        ()=><F/>}
               />
   </div>
  

  {
        
        props.render()}
  

• Ao passar parâmetros, o nome da função aqui costuma usar render, por isso é chamado de render props, como segue:
  

   <div className="childE">
       <ChildE dogList={
        
        this.state.dogList} 
               testJsx={
        
        <p>测试一下传递jsx</p>}
               // render={()=><F/>}
               render={
        
        (kind)=><F petKind={
        
        kind}/>}
               />
   </div>
  

  {
        
        props.render('狗狗')}
  

  接到E传来的宠物类型是：{
        
        props.petKind}
  

4. Código anexado:

• pai.jsx:

  import React from "react";
  import ChildA from "./ChildA";
  import ChildB from "./ChildB";
  import ChildC from "./ChildC";
  import ChildD from "./ChildD";
  import ChildE from "./ChildE";
  import F from "./F";
  import './index.css'
  
  class Parent extends React.Component{
        
        
      state = {
        
        
          notice:'通知——今天有学生被开除了！',
          expelledNum:1,
          student:{
        
        name:'张三',age:21,reason:'逃课次数过多'},
          citys:['北京','上海','广州','深圳'],
          dogList:[
              {
        
        dogName:'麦兜',dogAge:3},
              {
        
        dogName:'贝塔',dogAge:2},
          ]
      }
      //给子组件传递的函数
      getCityStrs =()=>{
        
        
          // console.log(this.state.citys);
          return this.state.citys;
      }
      //给子组件传递的带参数函数，参数用来接受子组件在调用函数时给父组件传递的数据
      addDog =(dog)=>{
        
        
          console.log('收到子组件添加的新dog：',dog);
  
          //更新 state中 dogList的数据，这样子组件E中展示的数据就是最新的
          const dogList = this.state.dogList; //获取旧数据
  
          const newDogList = [...dogList,dog]; 
          console.log(newDogList);
          this.setState({
        
        dogList:newDogList});// 更新state
      }
  
      render(){
        
        
          return(
              <div className="parent">
                  我是父组件!
                  <div className="childA">
                      <ChildA notice={
        
        '通知——今天放假！'}/>
                  </div>
                  <div className="childB">
                      <ChildB notice={
        
        this.state.notice} expelledNum={
        
        this.state.expelledNum} student={
        
        this.state.student}/>
                  </div>
                  <div className="childC">
                      <ChildC getCityStrs={
        
        this.getCityStrs}/>
                  </div>
                  <div className="childD">
                      <ChildD addDog={
        
        this.addDog}/>
                  </div>
  
                  <div className="childE">
                      <ChildE dogList={
        
        this.state.dogList} 
                              testJsx={
        
        <p>测试一下传递jsx</p>}
                              // render={()=><F/>}
                              render={
        
        (kind)=><F petKind={
        
        kind}/>}
                              />
                  </div>
              </div>
          )
      }
  }
  
  export default Parent;
  

• xxxA.jsx

  import React from "react";
  
  class ChildA extends React.Component{
        
        
      render(){
        
        
          return(
              <div>
                  我是子组件A！！！——类式组件
                  <br /><br />
                  收到来自于父组件的数据：{
        
        this.props.notice}
              </div>
          )
      }
  }
  
  export default ChildA;
  

• xxxB.jsx

  function ChildB(props){
        
        
      // console.log(props);
      const {
        
        name,age,reason} = props.student;
  
      return(
          <div>
              我是子组件B！！！——函数组件
  
              <br /><br />
              收到来自于父组件的数据：{
        
        props.notice}
              <br />
              被开除的人数是：{
        
        props.expelledNum}
              <br />
              被开除学生的信息：{
        
        name}-{
        
        age}-{
        
        reason}
  
          </div>
      )
  }
  
  export default ChildB;
  

• xxxC.jsx

  function ChildC(props){
        
        
      // console.log(props);
  
      //调用父传过来的函数 获取citys数据
      const citys = props.getCityStrs();
      // console.log(citys);
  
      return(
          <div>
              我是子组件C！！！——函数组件
  
              <br /><br />
              收到父传子的函数，并调用函数获取了数据：
              {
        
        
                  citys.map((city,index)=>{
        
        
                      return <li key={
        
        index}>{
        
        city}</li>
                  })
              }
  
          </div>
      )
  }
  
  export default ChildC;
  

• xxxD.jsx

  function ChildD(props){
        
        
      // console.log(props);
  
      const newDog = {
        
        dogName:'泡泡',dogAge:7};// 1. 准备要新增的dog数据
  
      const addDog = props.addDog;//2. 获取父组件传递过来的函数 addDog
      // addDog(newDog); //3. 在子组件中 执行 addDog 函数，并将新增dog传参过去给父组件
  
      return(
          <div>
              我是子组件D！！！——函数组件
  
              <br />
              {
        
        /* 1. 点击时，再把newDog 传过去   
                  2. 当然，这里如果看着不舒服，也可以把上面3步封装成一个函数，点击时触发新封装的函数 */}
              <button onClick={
        
        ()=>addDog(newDog)}>添加狗狗</button>
          </div>
      )
  }
  
  export default ChildD;
  

• xxxE.jsx

  function ChildE(props){
        
        
      console.log(props);
      const dogList = props.dogList;
      // console.log(dogList);
  
      return(
          <div>
              我是子组件E！！！——函数组件
              <br />
              {
        
        props.testJsx}
              <br />
  
              展示狗狗信息：
              <ul>
                  {
        
        dogList.map((dog,index)=><li key={
        
        index}>{
        
        dog.dogName}-{
        
        dog.dogAge}</li>)}
              </ul>
  
              <hr />
              {
        
        /* {props.children} */}
              {
        
        /* {props.render()} */}
              {
        
        props.render('狗狗')}
  
          </div>
      )
  }
  
  export default ChildE;
  

• F.jsx

  function F(props){
        
        
  
      return(
          <div>
              我是E组件的子组件，我是F！！！——函数组件
              <br />
              接到E传来的宠物类型是：{
        
        props.petKind}
          </div>
      )
  }
  
  export default F;