Question

我需要在用户回答问题或更改答案后将注意力集中在<Message />组件上。当答案尚未得到答复时，此消息不会显示在初始渲染上。

当我尝试使用ref在focus()组件上<Message />时，收到错误消息：

Cannot read property 'focus' of null

我认为因为此消息仅在组件更新后呈现。如何在组件更新后设置此ref？

class MyComponent extends Component {

  componentDidUpdate(prevProps) {
    if (prevProps.answer !== this.props.answer) {
      console.log(this.message); // logs null
      this.message.focus(); // Cannot read property 'focus' of null
    }
  }

  render() {
    return (
      <div>
        { // if the user has answer the question, show a message
          this.props.answer !== null ?
            <Message
              ref={(message) => { this.message = message; }}
            /> 
            : null
        }
      </div> 
    );
  }
}

修改

我刚刚意识到因为这个Message组件来自semantic-ui，它可能是一个无状态的功能组件，这意味着它不能有一个ref。

Answer 1

您可以尝试在包装元素上而不是在实际组件上设置ref：

class MyComponent extends Component {

  componentDidUpdate(prevProps) {
    if (prevProps.answer !== this.props.answer) {
      console.log(this.message); // logs null
      this.message.focus(); // Cannot read property 'focus' of null
    }
  }

  render() {
    return (
      <div>
        { // if the user has answer the question, show a message
          this.props.answer !== null &&
            <div ref={ message => this.message = message }>
              <Message/> 
            </div>
        }
      </div> 
    );
  }
}

在组件更新后设置React ref

1 个答案: