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上的Method（methodToFired），但我找不到从另一个子组件调用子组件上的函数的方法。

Answer 1

这很可能不你想做什么。

在我看来，您希望将methodToFired组件中的FltBox提取到XDashBoard组件中，因为它似乎是一种通用类型的方法，并将其作为支持您的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道具，从而强制FltBox重新呈现和更新用户点击DashTopNav。如果FltBox的最终结果可以直接从道具变化中得出，那么render函数就足够了，如果你需要执行副作用作为对道具变化的反应，那么你可以使用反应生命周期方法，如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

您可以使用refs

通过使用refs，我们可以访问在此示例中在render方法中创建的DOM节点或React元素，我们将使用refs来访问包含function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); clock.style.display = 'block'; var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { clearInterval(timeinterval); } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } // var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); initializeClock('clockdiv', schedule); var schedule = [ ['2018-05-01', '2018-05-02 13:36:00'], ['2018-05-02 13:36:01', '2018-05-09'] ]; // iterate over each element in the schedule for(var i=0; i<schedule.length; i++){ var startDate = schedule[i][0]; var endDate = schedule[i][1]; // put dates in milliseconds for easy comparisons var startMs = Date.parse(startDate); var endMs = Date.parse(endDate); var currentMs = Date.parse(new Date()); // if current date is between start and end dates, display clock if(endMs > currentMs && currentMs >= startMs ){ initializeClock('clockdiv', endDate); } }组件中methodToFired的元素，我们将使用FltBox组件div因此我们可以访问methodToFired。

然后我们将把这个引用用于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>

来自ReactJs上另一个组件的Fire组件方法

3 个答案: