TL; DR

Question

TL; DR

这可以吗？

class SideMenu extends React.Component {

  render() {
    // note passing this
    return 
        <MenuGroup menu={this}/>
  }
}

class MenuGroup extends React.Component {

  handleClick() {
    this.props.menu.setState({ some: "thing" })
  }

  render() {
   ...
  }
}

背景

我正在尝试使用ReactJS构建一个侧面菜单（如sb-admin中的那个）。（我知道我可以使用react-metismenu，但我这样做是为了学习如何使用ReactJS）

我可以考虑采用两种方法来做到这一点，但是Context docs类型警告我足够现在不使用它，特别是因为实验API 部分。

无论如何，我已经构建了一堆组件，但目前还没有真正的层次结构（因为如果我不做上下文就不需要它）。但我需要传递存储菜单当前状态的对象，并允许我更新它。

我想知道的是，如果我做的是好的，还是可以更好或应该避免。

Answer 1

如果您的组件过于复杂，我建议使用一些状态管理工具，例如mobx或redux。将this传递给违反反应one-way flow原则的子组件并不是一个好主意。

您可能正在寻找： https://facebook.github.io/react/docs/lifting-state-up.html

简而言之，您的代码应如下所示：

class SideMenu extends React.Component {
  constructor(props) {
    super(props)
    this.handleMenuChange = this.handleMenuChange.bind(this)
  }

  handleMenuChange(value) { this.setState({something: value })

  render() {
    // note passing this
    return 
        <MenuGroup handleMenuChange={this.handleMenuChange}/>
  }
}

class MenuGroup extends React.Component {

  handleClick() {
    this.props.handleMenuChange("thing")
  }

  render() {
   ...
  }
}

此结构可让您更轻松地进行推理和重构，而且您的子组件现在可以重复使用。

可以在render（）方法中传递`this`

TL; DR

背景

1 个答案: