Question

从长远来看，我试图用React重现这个Codepen。

然而，它需要着陆页的高度（背景中的gif），并且我试图获得＆＃34;我的＆＃34;但出于某种原因，我在使用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)}。

与<{1}}完全不同如果它不期望返回一个值，则不会产生它。它可能会导致副作用。

我在codesandbox
上测试了演示

获取子组件大小的问题

1 个答案: