Javascript 反应：通过裁判？

我正试图弄清楚如何访问React组件上的“public”方法，该组件已被任意数量的高阶组件修饰。大概是这样的：

class Toolbar extends React.Component {
  openSubMenu(menuName) {
    // whatever
  }

  render() {
    // whatever
  }
}

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  preload(), // custom higher order component which displays loading state
)(Toolbar);

如果我现在在工具栏上得到一个

ref

，openSubmenu方法将不可用，因为它隐藏在（在本例中为2）高阶组件下。在底层组件上是否有任意方法？

检查工作演示：

基于React的

单向数据流

性质，组件函数总是由一些传入的props值触发：

var Toolbar = React.createClass({
  render: function() {
    console.log(this.props);
    return <div className={this.props.active ? "active" : ""}>Menu Item</div>;
  }
});

var Parent = React.createClass({
  open: function() {
    this.setState({
      subMenuActive: true
    });
  },
  render: function() {
    console.log(this.state);
    var isActive = (this.state || {})['subMenuActive'];
    return <div><Toolbar active={isActive}></Toolbar><button onClick={this.open}>Open sub menu</button></div>;
  }
});

var Toolbar=React.createClass({
render:function（）{
console.log（this.props）；
返回菜单项；
}
});
var Parent=React.createClass({
打开：函数（）{
这是我的国家({
子菜单：真
});
},
render:function（）{
console.log（this.state）；
var isActive=（this.state | |{}）['subMenuActive']；
返回打开子菜单；
}
});

因此，过程应该是反向的，这意味着：一个组件应该被其他人使用，这将通过指定不同的

道具

值触发不同的行为

---

如果要在组件内部触发某些特定函数（而不是在示例中更改类名），则需要在一些特殊函数中编写一些代码，如

componentWillReceiveProps

或

componentDidMount

。React将在某个特定时刻调用这些函数：

引用未通过 虽然高阶组件的约定是通过所有道具传递到包裹的组件，但不可能通过参照。这是因为ref并不是一个道具式的键，它是由React专门处理的。如果将ref添加到其组件是HOC结果的元素，则ref引用的是最外层容器组件的实例，而不是包装的组件

---

检查

我想你误解了这个问题，我很清楚良好的组件设计准则，我的问题是：如何处理可能是高阶组件中任意级别的组件？答案是：通过

道具

，逐级进行。当然，你会经历

事件

，这是不受鼓励的。