从ReactJs上的另一个组件触发组件方法

Question

我有以下组成部分：

class DashTopNav extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    return(<button></button>);
  }
}
class FltBox extends React.Component {
  constructor(props) {
    super(props);
  }

  methodToFired(){
  }
}

class XDashBoard extends React.Component {
    constructor(props) {
    super(props);
  }
  render(){
    return(<div className="XDashBoard">
        <DashTopNav onClick={call methodToFired on FltBox}  />
        <FltBox />
    </div>);
  }
}

我想用DashTopNav上的按钮调用FltBox（methodToFired）上的方法，但是我找不到从另一个子组件中调用子组件上的函数的方法。

Answer 1

这很可能不是您想要执行的操作。

在我看来，您似乎想从FltBox组件中将methodToFired提取到您的XDashBoard组件中，因为它似乎是一种通用类型的方法，并将其作为prop传递给DashTopNav组件，或者使用Flux模式来触发操作。您DashTopNav您FltBox然后响应。

您的示例代码太过粗暴，无法做出正确的假设，但是以下是一个可行的重构，很可能更适合您。

class DashTopNav extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(<button {...this.props}>Button</button>);
  }
}

class XDashBoard extends React.Component {
  constructor(props) {
    super(props);
  }

  methodToFired (e) {
    console.log('fired');
  }

  render() {
    return(
      <div className="XDashBoard">
        <DashTopNav onClick={this.methodToFired} />
      </div>
    );
  }
}

Answer 2

使用React，您不应尝试任意访问另一个组件方法。 基本上，React不是那样设计的。 React组件会对其道具和状态的变化做出反应，因此您可以通过更改道具和状态来控制它们。

在您的示例中，您可以将类方法从父组件传递到DashTopNav.onClick并更改该函数内的FltBox ，从而在用户单击DashTopNav时强制FltBox重新呈现和更新。 如果FltBox的最终结果可以直接从道具更改中得出，那么render函数就足够了，如果您需要对道具更改做出反应来产生副作用，那么您可以使用React生命周期方法，例如didComponentUpdate 。

例如：

class DashTopNav extends React.Component {
  constructor(props) {
    super(props);
  }

  render(){
    return(<button></button>);
  }
}

class FltBox extends React.Component {
  constructor(props) {
    super(props);
  }

  didComponentUpdate() {
    // Handle navButtonClick update 
  }
}

class XDashBoard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       navButtonClick: false 
    };
  }

  handleNavClick = () => {
     this.setState({navButtonClick: true});
  }

  render(){
    const {navButtonClick} = this.state;

    return(
      <div className="XDashBoard">
        <DashTopNav onClick={this.handleNavClick}  />
        <FltBox navButtonClick />
      </div>
    );
  }
}

Answer 3

您可以使用裁判

通过使用ref，我们可以访问在此示例中在render方法中创建的DOM节点或React元素，我们将使用ref来访问FltBox组件中包含methodToFired的元素，我们将使用div元素，从而可以访问methodToFired 。

那么我们将使用该ref到div元素，并将其传递给我们在本例中DashTopNav任何组件作为onClick={this.parentClickHandler}的道具

 class FltBox extends React.Component { constructor(props) { super(props); } methodToFired(){ alert('Fired from FltBox') } // here we use ref to access to the div element render() { return (<div ref={div => this.div = div}></div>); } } class DashTopNav extends React.Component { constructor(props) { super(props); } render(){ return ( <button onClick={this.props.onClick}>Submit</button> ); } } class XDashBoard extends React.Component { constructor(props) { super(props); this.parentClickHandler = this.parentClickHandler.bind(this) } parentClickHandler() { this.mydiv.methodToFired(); } render(){ return(<div className="XDashBoard"> <DashTopNav onClick={this.parentClickHandler} /> <FltBox ref={div => this.mydiv = div}/> </div>); } } ReactDOM.render(<XDashBoard />, document.querySelector("#app")) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>