Question

我需要在渲染子组件之前计算组件的宽度。

但是，问题是我需要首先渲染组件才能获得子组件所需的宽度。

换句话说，我需要在主要组件中完成渲染后添加子组件。

我认为 componetnDidMount() 最适合这样做。

这是代码示例

/**
 * @returns void
 */
componentDidMount()
{
    let width = this.seatMap.offsetWidth;
    // I want to add component here
    <LeafletMap width={width}/>
}

/**
 * @returns {XML}
 */
render() {
    return (
        <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
            // This is way how it is work at this moment
            <LeafletMap />
            </div>
    );
}

Answer 1

首先，在构造函数中添加状态变量。一个用于检查LeafletMap是否已准备好呈现，另一个用于将LeafletMap的宽度作为prop传递：

constructor(props) {
    super(props);
    this.state = {
        widthLeafletMap: null
        displayLeafletMap: false
    };
}

然后，在您的componentDidMount方法中，更新这两个状态变量以重新渲染父组件，因为您现在知道LeafletMap的宽度并且已准备好显示：

componentDidMount()
{
    let width = this.seatMap.offsetWidth;
    this.setState({
        widthLeafletMap: width,
        displayLeafletMap: true
    });
}

最后，更新您的render()方法，以便在准备好以所需宽度显示时显示LeafletMap组件（如果只有displayLeafletMap为true，它将以所需宽度显示它）：

render() {
    let displayLeafletMap = this.state.displayLeafletMap;
    let widthLeafletMap = this.state.widthLeafletMap;
    return (
        <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
            {displayLeafletMap && (
                <div className="row">
                    <LeafletMap width={widthLeafletMap} />
                </div>
            )}
        </div>
    );
}

Answer 2

我们可以在componentDidMount中设置状态并检查渲染中的状态，这样只有在组件安装并设置状态以便您可以返回时，例如：

/**
 * @returns void
 */
... define state in constructor ...

componentDidMount()
{
    let width = this.seatMap.offsetWidth;
    // set state here
    this.setState({seatMapWidth: width});
}

/**
 * @returns {XML}
 */
render() {
//add condition here to control your return 
  const {seatMapWidth} = this.state;
  if(seatMapWidth !== null){
   // if this state is not null so return your component
     return <LeafletMap width={seatMapWidth}/> 
}
   return (
        <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
            // This is way how it is work at this moment
            <LeafletMap />
            </div>
    );
}

在ReactJs中的componentDidMount上添加新组件

2 个答案: