向通过props传递到另一个组件的react组件添加属性

Question

我有一个元素包装器来获取需要传递给子元素的父级的高度。

我正在通过ref

获取并设置高度

我正在把孩子传递给父母，需要将身高传递给孩子。

class WrapElement extends React.Component<{element: any},any> {
    constructor(props: any) {
        super(props);
        this.getHeight = this.getHeight.bind(this);
        this.setHeight = this.setHeight.bind(this);
        if (this.props.element) window.addEventListener('resize', this.setHeight);

    }
    getHeight() {
        let { clientHeight }: any = this.refs.elemWrapper;
        return clientHeight;
    }
    setHeight() {
        this.setState({wrapperHeight: this.getHeight()})
    }
    componentDidMount() {
        this.setHeight();
    }
    shouldComponentUpdate() {
        return !this.state || this.getHeight() !== this.state.wrapperHeight;
    }
    componentDidUpdate() {
        this.setHeight();
    }
    render() {
        return <div
            ref="elemWrapper"
            >
            {this.props.element? <this.props.element wrapperHeight={this.state.wrapperHeight} /> : 'no render'}
        </div>
    }
}

我确定<this.props.element />无效，但是我不知道如何将wrapperHeight传递给孩子。

Answer 1

您可以使用React.cloneElement来克隆元素并传递额外的道具，

  {
       this.props.element? React.cloneElement(
         this.props.element, 
         { wrapperHeight: this.state.wrapperHeight
       }): 
       'no render'
   }