按顺序同步呈现React组件
按顺序同步呈现React组件
提问于 2018-06-01 02:06:45
我正在创建一个React应用程序并使用Mobx进行状态管理。代码如下所示：
@observer
class ComponentX extends React.Component {
constructor(props) {
super(props);
this.renderC = this.props.renderC;
}
render() {
return (
<div>
<div>
<ComponentA />
</div>
<ComponentB mousePosition={this.props.mouseCoordiantes}/>
{this.props.renderC && <ComponentC/>}
</div>
)
}
}<ComponentC/>执行一些DOM操作，要求<ComponentB/>在执行其操作之前完全呈现。由于<ComponentB/>使用这些鼠标坐标作为道具，因此当用户移动鼠标时，ComponentX会不断地重新渲染，从而导致子组件也会重新渲染。(mouseCoordiantes和renderC是Mobx observables，因此只要它们的值发生更改，使用它们的组件就会自动重新渲染)。根据鼠标位置，renderC设置为true，这会导致<ComponentC/>进行渲染。
但是，当renderC设置为true时，<ComponentC/>会在<ComponentB/>完成渲染到DOM之前进行渲染。因此，预期的结果并未实现。为什么会发生这种情况?我如何确保只有在<ComponentB/>完全渲染之后才会渲染<ComponentC/>？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50630324
复制相关文章
相似问题
腾讯云开发者
