[英]React doesn’t rerender component if already rendered once
I have a component called ChildComponent which I call from ParentComponent as below. 我有一个名为ChildComponent的组件,该组件从ParentComponent调用,如下所示。 Point to be noted: 需要注意的地方:
return this.refs.chid
which gives error 为此,我正在使用return this.refs.chid
给出错误 Below is the code. 下面是代码。
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>
)
}
})
You have to store your component inside state
您必须将组件存储在state
Try out this 试试这个
Code: 码:
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>
)}
})
You have some inconsistencies in your term usage. 您的术语用法存在一些不一致之处。
Mounting is when a component didn't use to exist, and then exists. 挂载是指某个组件曾经不存在,然后又存在。 Mounting starts from initial state and includes a render. 安装从初始状态开始,并包括渲染。
Rerendering happens when the properties/state of a component change, but the component hierarchy does not change. 当组件的属性/状态更改但组件层次结构不变时,将进行渲染 。 This preserves the component state. 这样可以保留组件状态。
I'm not sure how you're trying to accomplish what you say by returning this.refs.child
. 我不确定您如何通过返回this.refs.child
来完成您所说的this.refs.child
。 A simple way to accomplish a single-time effect like this is to simply conditionally render the element, like so: 完成这样的一次性效果的一种简单方法是简单地有条件地渲染元素,如下所示:
render:function(){
const child = (this.state.rendered) ? <ChildComponent/> : ""
return (
<div>
{child}
</div>
<button onClick={this.onbuttonclick()}>Show Child Again</button>
)}
})
Do note that in this approach, changing rendered
from true to false will cause ChildComponent
to unmount, losing the state of that component instance. 请注意,在这种方法中,将rendered
从true更改为false会导致ChildComponent
卸载,从而丢失该组件实例的状态。 I imagine in most cases this would be wanted behavior. 我想在大多数情况下这是通缉犯。
When to Use Refs 何时使用参考
There are a few good use cases for refs: 有一些很好的参考用例:
Managing focus, text selection, or media playback. 管理焦点,文本选择或媒体播放。 Triggering imperative animations. 触发命令式动画。 Integrating with third-party DOM libraries. 与第三方DOM库集成。 Avoid using refs for anything that can be done declaratively. 避免将ref用于可以声明式完成的任何事情。
For example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it. 例如,不要在Dialog组件上公开open()和close()方法,而是向其传递isOpen属性。
https://facebook.github.io/react/docs/refs-and-the-dom.html https://facebook.github.io/react/docs/refs-and-the-dom.html
For your purpose you can use conditional rendering by checking your state and deciding which component you should render. 出于您的目的,可以通过检查状态并确定应渲染的组件来使用条件渲染。 https://facebook.github.io/react/docs/conditional-rendering.html https://facebook.github.io/react/docs/conditional-rendering.html
Hope it helps. 希望能帮助到你。
It seems to me that you're jumping hoops to achieve something that React already does really well; 在我看来,您正在为实现React已经非常出色的目标而努力。 determine when to re-render your component and when to update the DOM. 确定何时重新渲染组件以及何时更新DOM。
If you know better than React when to re-render a component, you can define a shouldComponentUpdate(nextProps, nextState)
method on your component that takes the next props and state of your component and returns true
or false
based on your own rules. 如果您比React更了解何时重新渲染组件,则可以在组件上定义shouldComponentUpdate(nextProps, nextState)
方法shouldComponentUpdate(nextProps, nextState)
方法采用组件的下一个支持和状态,并根据自己的规则返回true
或false
。
See the lifecycle methods in the React documentation: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate 请参阅React文档中的生命周期方法: https : //facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.