Question

我有两个组件，TopBarItem和Menu，它们是嵌套的并且具有功能＆＃34;如果菜单打开，则顶栏不应显示工具提示＆＃34;。我想像这样把它们连在一起：

<TopBarItem tooltip="Settings">
  <Menu onOpen={parent.tooltipOff} onClose={parent.tooltipOn}>…</Menu>
</TopBarItem>

这在JSX / React中是否可行？很高兴下载到JS，但如果可能的话，更愿意保留JSX。

另一个选项（来自已删除的答案）是将两个组件包装在第三个祖父母中，该祖父母保持tooltipEnabled状态并通过属性将其传递给TopBarItem。虽然这是完全可以接受的，但如果可能的话，我更愿意直接在TopBarItem切换状态，而不是通过祖父母切换。

Answer 1

使用之前删除的答案建议的实施方案。如果有人知道，将接受更简洁的解决方案。

export class TopbarMenuItem extends Component {
  state: {
    tooltipEnabled: bool
  }
  tooltipOn: () => null;
  tooltipOff: () => null;

  constructor(props: Object) {
    super(props);
    this.state = {
      tooltipEnabled: true
    }
    this.tooltipOn = this.tooltipOn.bind(this);
    this.tooltipOff = this.tooltipOff.bind(this);
  }

  tooltipOff() {
    this.setState({tooltipEnabled: false});
  }

  tooltipOn() {
    this.setState({tooltipEnabled: true});
  }

  render() {
    return (
      <TopbarItem tooltip={this.state.tooltipEnabled ? this.props.tooltip : ''}>
        <Menu onOpen={this.tooltipOff} onClose={this.tooltipOn}>
          {this.props.children}
        </Menu>
      </TopbarItem>
    );
  }
}

如何在实例化时将React子组件和父组件链接在一起？

1 个答案: