调用同级组件函数时获取 null答案

【问题标题】：Getting null when invoking sibling component function调用同级组件函数时获取 null
【发布时间】：2019-12-16 11:37:51
【问题描述】：

单击Contact Us 按钮时，我正在同一页面上实现滚动功能。 Contact Us 包含在子组件 (MyNavbar) 中；单击时，它将滚动到另一个子组件（MyContactForm）中包含的片段，该子组件是MyNavbar的兄弟。

这是父组件：

// App.js
import React, { Component } from 'react';
import MyNavbar from './components/MyNavbar';
import MyContactForm from './components/MyContactForm';

export default class App extends Component {

    constructor(props) {
        super(props);
        ...
    }

    scrollToContactForm = () => {
        this.refs.contactForm.scrollTo();
    }

    render() {
        return (
            <main>
                <MyNavbar onClickToContactUs={ () => this.scrollToContactForm() } />
                <MyContactForm  ref="contactForm" />
            </main>
        );
    }
}

这是两个子组件，MyNavbar

// MyNavbar.js
import React, { useState } from 'react';
import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';

const MyNavbar = (props) => {

    return ( 
        <Navbar>
            <Nav>
                ...
                <NavItem>
                    <NavLink href="/products/"> Products </NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="/services/"> Services </NavLink>
                </NavItem>
                <NavItem>
                    <NavLink onClick={ () => props.onClickToContactUs() }  href="#"> Contact Us </NavLink> 
                </NavItem>
            </Nav>
        </Navbar>
    );

}

export default MyNavbar;

和MyContactForm:

// MyContactForm.js
import React, { Component } from 'react';
import { Form, ... } from 'reactstrap';

export default class MyContactForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            ...
            inquiry: ''
        };

        this.setEmail = this.setEmail.bind(this);
        ...
        this.setInquiry = this.setInquiry.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.myRef = React.createRef();
    }
    setEmail(event) {
        this.setState( { email: event.target.email } );
    }
    ...
    setInquiry(event) {
        this.setState( { question: event.target.inquiry } );
    }
    handleSubmit(event) {
        alert("Thank you for contacting us. We will respond to you shortly");
        event.preventDefault();
    }

    scrollTo = () => window.scrollTo(0, this.myRef.current.offsetTop);

    render() {
        return (
            <React.Fragment ref={this.myRef} >
                <Form onSubmit={this.handleSubmit}>
                    ...
                </Form>
            </React.Fragment>
        );
    }
}

应用程序运行，但是当我点击 Contact Us 时，我收到一条消息说

this.myRef.current is null

我怎样才能让它工作？

【问题讨论】：

ref 不是道具的有效名称。此外，您将作为字符串传递并附加在不是 DOM 节点的 Fragment 中。
您是否尝试为表单元素提供 ref={this.myRef} 而不是 react.Fragment ？

标签： reactjs

【解决方案1】：

这对我有用：

我将<React.Fragment> 替换为<div>。将 ref 放入 <Form> 也不起作用，因为它应该位于 DOM 节点（HTML 元素，而不是 React 组件）上。所以MyContactForm.js变成了：

render() {
    return (
        <div ref={this.myRef} >
            <Form onSubmit={this.handleSubmit}>
                    ...
            </Form>
        </div>
    );
}

【讨论】：