Question

我有一个名为ChildComponent的组件，我从ParentComponent调用如下所示。需要注意的是：

有一个按钮“Show Child”。
在第一次单击此按钮时，它应该重新呈现子组件。但是在后续点击中，它甚至不应该调用ChildComponent，而是从this.refs中获取dom。为此我使用return this.refs.chid给出了错误

以下是代码。

ParentComponent= React.creatClass({
  getInitialState: function(){
    return {
      rendered: false
    }
  },
  render_or_cache: function(){
    if (this.state.rendered){
      return this.refs.child;
    }
    else {
      return <ChildComponent/>
    }
  },
  onbuttonclick: function(){
    this.setState({rendered: true})
  },
  render:function(){
    return (
      <div ref="child">
        {this.render_or_cache()}
      </div>
      <button onClick={this.onbuttonclick()}>Show Child Again</button>
    )
  }
})

ChildComponent= React.creatClass({
  render:function(){
    return (
      <div>Some Text from Child</div>
    )
  }
})

Answer 1

您必须将您的组件存储在state

中

试试这个

<强>代码：

ParentComponent= React.creatClass({
getInitialState: function(){
   return {
             childComponent :[]
          }
},

onbuttonclick: function(){
   this.setState({childComponent.concat(<ChildComponent/>)})
}
render:function(){

return (
      <div ref="child">
           {this.state.childComponent}
     </div>
     <button onClick={this.onbuttonclick()}>Show Child Again</button>
)}
})

ChildComponent= React.creatClass({
render:function(){

return (
        <div>Some Text from Child</div>
)}
})

Answer 2

您的学期用法存在一些不一致之处。

挂载是组件不存在然后存在的时候。安装从初始状态开始，包括渲染。

当组件的属性/状态发生更改但组件层次结构不会更改时，会发生

重新呈现。这样可以保留组件状态。

我不确定你是如何通过返回this.refs.child来完成你所说的话。实现这样的单次效果的一种简单方法是简单地有条件地渲染元素，如下所示：

render:function(){
const child = (this.state.rendered) ? <ChildComponent/> : ""

return (
      <div>
           {child}
     </div>
     <button onClick={this.onbuttonclick()}>Show Child Again</button>
)}
})

请注意，在此方法中，将rendered从true更改为false将导致ChildComponent卸载，从而丢失该组件实例的状态。我想在大多数情况下这都是通缉行为。

Answer 3

何时使用参考

refs有一些很好的用例：

管理焦点，文本选择或媒体播放。触发   势在必行的动画。与第三方DOM库集成。   避免将refs用于任何可以声明性地完成的事情。

例如，不要在a上公开open（）和close（）方法   对话框组件，将isOpen prop传递给它。

https://facebook.github.io/react/docs/refs-and-the-dom.html

出于您的目的，您可以通过检查状态并决定应呈现哪个组件来使用条件呈现。 https://facebook.github.io/react/docs/conditional-rendering.html

希望它有所帮助。

Answer 4

在我看来，你正在努力实现React已经做得很好的事情;确定何时重新渲染组件以及何时更新DOM。

如果您比React更了解何时重新渲染组件，则可以在组件上定义shouldComponentUpdate(nextProps, nextState)方法，该方法获取组件的下一个道具和状态，并返回true或{{ 1}}基于你自己的规则。

请参阅React文档中的生命周期方法：https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

如果已经渲染一次，React不会重新渲染组件

4 个答案: