反应：传递ref通过？

Question

I'm trying to figure out how to get access to a "public" method on a React Component, that's been decorated with any number of higher-order components. Something like this:

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);

If I now get a ref on the toolbar, the openSubmenu method isn't available, because it's hidden under (in this case 2) higher order components. Is there anyway to get to an arbitrary method on the underlying component?

Answer 1

Refs Aren't Passed Through While the convention for higher-order components is to pass through all props to the wrapped component, it's not possible to pass through refs. That's because ref is not really a prop — like key, it's handled specially by React. If you add a ref to an element whose component is the result of an HOC, the ref refers to an instance of the outermost container component, not the wrapped component.

check https://facebook.github.io/react/docs/higher-order-components.html

Answer 2

Check the working demo: JSFiddle

Based on the one-way data flow nature of React, a component function is always triggered by some passed-in props value:

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>;
  }
});

So the process should be reversed , which means: a component should be used by others, which will trigger different behaviours by specifying different props value.

If you want to trigger some specific function inside the component (instead of changing a className in the example), you need to write some code in some special functions like componentWillReceiveProps or componentDidMount . There functions will be called by React at some particular moment: https://facebook.github.io/react/docs/component-specs.html