Question

我正在创建一个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/>在完成其内容之前完全呈现。 ComponentX会不断重新渲染，导致子组件在用户移动鼠标时也会重新渲染，因为<ComponentB/>会将这些鼠标坐标用作道具。（mouseCoordiantes和renderC是Mobx observables，因此每当它们的值发生变化时，使用它们的组件会自动重新渲染。根据鼠标位置，renderC设置为true，导致<ComponentC /＆gt;渲染。

但是，当renderC设置为true时，<ComponentC/>会在<ComponentB /＆gt;之前呈现已完成渲染到DOM。因此，没有实现预期的结果。为什么会发生这种情况？如何才能确保<ComponentC/>仅在<ComponentB/>完全呈现后呈现？{/ p>

Answer 1

使用componentDidMount

class ComponentB {
  componentDidMount() {
    this.setState({renderC: true});
  }

  render() {
     return <div>
        ...
        {this.state.renderC && <ComponentC />}
     </div>
  }
}

class ComponentX {

  render() {
    <ComponentB />
  }
}

按顺序同步渲染React组件

1 个答案: