将子组件集中在安装上

Question

我想创建一个受控菜单。如果传递了focused索引，则菜单应自动将相应选项聚焦在安装上。为此，我实现了以下内容。

export default class Option extends Component {
  componentDidMount() {
    // The focus appears only on calling force update
    // this.forceUpdate();
  }

  render() {
    // focus the second option
    return (
      <div className="menu">
        {props.options.map((o, index) => (
          <Option focused={index === 1}>{o.label}</Option>
        ))}
      </div>
    );
  }
}

export default class Option extends PureComponent {
  constructor(props) {
    super(props);

    this.optionRef = React.createRef();
  }

  componentDidMount() {
    if (this.props.focused) {
      this.optionRef.current.focus();
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.focused) {
      this.optionRef.current.focus();
    }
  }

  render() {
    return (
      <div
        tabIndex={-1}
        ref={this.optionRef}
        onClick={this.props.onClick}
      >
        {this.props.children}
      </div>
    );
  }
}

但是，该选项未将重点放在安装上。我必须强制更新菜单以触发componentDidUpdate，这将导致该选项聚焦。有没有一种更清洁的方法（除了将所有引用放入菜单组件之外）？