Question

我创建了一个code sandbox来测试新的react createRef api，但是接缝有问题。我遵循了react doc，但我不知道出了什么问题。有人可以看看代码吗？

“反应”：“ 16.5.2”，

“ react-dom”：“ 16.5.2”，

父项：

import React, { Component } from "react";
import ChildComponent from "./ChildComponent";

export default class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    const node = this.myRef.current;
    return (
      <React.Fragment>
        <ChildComponent ref={this.myRef} />
        <button
          onClick={() => {
            console.log(node);
          }}
        >
          Run Me
        </button>
      </React.Fragment>
    );
  }
}

子组件：

import React, { Component } from "react";

export default class MyComponent extends Component {
  state = {
    message: "nothing!"
  };
  SayHi = () => {
    this.setState({ message: "Hi From Parent" });
  };
  render() {
    const { message } = this.state;
    return <div>Message: {message}</div>;
  }
}

Answer 1

这很可能是由于您的ref在第一次渲染后未完全初始化，这意味着当调用onClick时，从技术上来说，您是在“记录”未初始化值的缓存副本。

请考虑进行以下更改，以在ref事件期间访问已初始化且当前的onClick：

export default class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    // const node = this.myRef.current; <-- Remove this
    return (
      <React.Fragment>
        <ChildComponent ref={this.myRef} />
        <button
          onClick={() => {
            // Move to here, causes the current ref to be accessed during onClick
            const node = this.myRef.current;
            console.log(node);
          }}
        >
          Run Me
        </button>
      </React.Fragment>
    );
  }
}

希望这会有所帮助！

Answer 2

我认为您正在尝试单击按钮时运行子组件的SayHi（）方法，在父组件的渲染中，您需要删除const node = this.myRef.current，而onClick方法将如下所示

onClick={() => { this.myRef.current.SayHi(); }}

这将调用子组件的SayHi（）方法。

React.createRef（）不起作用

2 个答案: