Question

我遇到这种情况，我有两个兄弟组件，其中第一个组件如下所示：

class X extends Component {

   someRenderMethod(){
       //does something 
   }  

   render(){
      return(
          <div class="xyz">
             <p>some text</p>
             <div class="the-div-i-want-render" ref="one">
                   {this.someRenderMethod}
             </div>
          </div> 
      )
   }
}

function mapStateToProps(){
   //
}

function mapDispatchToProps(){
  //
}

export default connect(mapStateToProps, mapDispatchToProps)(X);

我的第二个兄弟组件如下：

    import X from './x'

    export class Y extends Component {

       render(){
          return (
               <div>
                  <div>
                         //Here I want to render the div inside   //component X
                         // In the real case, I show the div here in                   //response to a button click event. 
                        //I have tried to import the component and get           //the refs of X, but that is not working. 
                  </div>

               </div>

           )
       }
    }

我试图将组件X导入Y并获取X的ref，但这不起作用（ref对象始终为null）。还有其他方法可以实现这个目标吗？

Answer 1

通过导入X，您只需导入组件的类。不是它的实例（https://en.wikipedia.org/wiki/Class_(computer_programming)）

组件refs在组件装入（呈现一次）之前不可用。因此，第一次有权访问refs对象时，组件componentDidMount生命周期功能。

解决您的问题：组件X需要将其refs树向上传递给父组件。父级同时呈现X和Y。挂载X后，您可以从父容器调用回调，并将refs作为参数传递。父母现在可以对此做出反应，并通过refs将Y对象传递给props。您可以使用本地状态this.state/setState在Y安装后轻松实现X的重新呈现。

在React中访问兄弟组件的引用

1 个答案: