获取子组件大小的问题

Question

长话短说，我正在尝试使用 React 重现此 Codepen。

但是，它需要着陆页的高度（背景中的 gif），我试图获得“我的”，但由于某种原因，我在使用 refs 时遇到了麻烦。

这里是父组件：

export default class Stadium extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            height: '',

        }
    }


    componentDidMount() {
        console.log(this.Landing);
    }

    render() {
        const { data, scrollClass } = this.state;
        return (
            data !== null &&
            [
                <Header key={"header"} scrollClass={scrollClass} />,
                <Landing key={"landing"} heightRef={(elem) => this.Landing = elem}/>,
                <Maps key={"maps"} gmapskey={data.g_map_key} />,
                <p>Taille du landing: {this.state.height}</p>,
                <Footer key={"footer"}/>

            ]
        )
    }
}

这是我的子组件：

export default class Landing extends React.Component {

    render() {
        return (
            [
                <header id="landing" className="white-text" key={"header"} ref={this.props.Landing}>
                    <div className="container">
                        <h1>Opacity on scroll</h1>
                        <p>The header element fades away.</p>
                    </div>
                </header>,

                <div id='nav-bg' key={"bg"} />
            ]
        )
    }
}

根据this和this jsfiddle link，我应该可以得到我组件的对象，但是console.log(this.Landing);返回undefined。

我忘记了什么？

提前谢谢你

Answer 1

应该是：

<Landing key={"landing"} Landing={elem => { this.Landing = elem; }} /></Landing> 

在Landing里面，改成这样：

<header id="landing" className="white-text" key={"header"} ref="header"></header>

另一个问题：
- <p> 标签缺少键值

注意：
您可以使用<React.Fragment></React.Fragment> 来包装您的组件，因此它不会创建额外的<div>，并且您不必提供键值。

更新：
传递props时的一个常见错误：
heightRef={(elem) => this.Landing = elem}与
heightRef={(elem) => { return (this.Landing = elem); }},
heightRef={(elem) => { this.Landing = elem; return (this.Landing); }}相同
和heightRef={(elem) => (this.Landing = elem)}。

这与heightRef={(elem) => { this.Landing = elem; }} 完全不同 如果它不期望返回值，则不要产生它。可能会产生副作用。

有我在codesandbox上测试过的demo