Question

我正在尝试使用一些嵌套的渲染道具来组成一个按钮，该按钮可选地带有图标，而按钮又可选地带有工具提示，该提示将在鼠标悬停或单击时显示。为此，我认为我需要将对Icon的引用传递给子Tooltip组件。

根据我读过的书here

  // Icon

  componentDidMount() {
    this.iconInstance = ReactDOM.findDOMNode(this);
    console.log('Icon mounted, instance', this.iconInstance);
  }

  render() {
    console.log('Icon render iconInstance', this.iconInstance);
    return (
      <span style={{ display: 'inline' }}>
        <span>{this.props.iconText}</span>
        {this.props.tooltip({ iconInstance: this.iconInstance })}
      </span>
    );
  }

然后在Tooltip中，将添加一个侦听器

  componentDidMount() {
    console.log('Tooltip mounted', this.props);
    // fails because iconInstance is undefined
    // this.props.iconInstance.addEventListener(
    //   this.props.mouseEvent,
    //   this.showTooltip
    // );
  }

在我设置this.iconInstance之后，可以立即对其进行记录，以便似乎可以正常工作。但是，在渲染功能中，我变得不确定。

可能有一种使用forwardRef的方法，但是我找不到从Tooltip组件向下将App组件作为渲染道具的一种方法。 {1}}并为其添加一个Icon道具，例如，ref收到一条错误消息，提示您无法传递这样的引用，它将失败。

Full code

Answer 1

ComponentDidMount是在首次调用render方法之后执行的方法。是ComponentWillMount方法，该方法在执行render方法之前被调用。

传递给渲染道具时对DOM实例的引用未定义

1 个答案: