Javascript 如何在另一个react组件上调用另一个函数？

我是es6新手，此代码在React.createClass中工作。我总共有2个函数要传递给另一个组件，我的问题是我对它的上下文感到困惑，我的代码如下：

class AppOne extends React.Component {
 constructor(props) {
  super(props);
 this.state = {
      timers: [
        {
            title: 'Practice squat',
            project: 'Gym Chores',
            id: v4(),
            elapsed: 5456099,
            runningSince: Date.now()
        },
        {
            title: 'Bake squash',
            project: 'Kitchen Chores',
            id: v4(),
            elapsed: 1273998,
            runningSince: null
        },
      ],
    };

  this.func = this.func.bind(this);
  this.stopTimer = this.stopTimer.bind(this); //<--"Uncaught TypeError: this.stopTimer is 
// not a function"
 } 

 func(timerId) {
        this.stopTimer(timerId);
 }

 stopTimer(timerId) {
    const now = Date.now();

    this.setState({
        timers: this.state.timers.map((timer) => {
            if(timer.id === timerId) {
                const lastElapsed = now - timer.runningSince;
                return Object.assign({}, timer, {
                    elapsed: timer.elapsed + lastElapsed,
                    runningSince: null
                });
            } else {
                return timer;
            }
        }),
    });
}

 render() {
  return (
   <AppTwo handleFuncFromAppOne = {this.func} timers={this.state.timers} />
  );
 }
}

class AppTwo extends React.Component {
 handleFuncFromAppTwo() {
  this.props.handleFuncFromAppOne(this.props.timers.id)
 }
 render() {
  return(
   <AppThree handleFuncFromAppThree={this.handleFuncFromAppTwo} />
  );
 }
}

class AppThree extends React.Component {
 render() {
  return (
   <div
    className='ui bottom attached red basic button'
    onClick={this.props.handleFuncFromAppThree} // I want to invoke here
   >
    Stop
   </div>
  );
 }
}

---

你看，我已经在应用一上绑定了stopTimer，它使用this.setState来更改状态，我的问题是我无法在应用三上调用它。我的错误是UncaughtTypeError：this.stopTimer不是函数。我似乎对React.createClass没有这个问题。帮助？

好的，您的问题是您没有传递定义HandleFuncFromApp3的类的引用。您可以这样做：

class AppOne extends React.Component {
 constructor(props) {
  super(props);
 this.state = {
      timers: [
        {
            title: 'Practice squat',
            project: 'Gym Chores',
            id: v4(),
            elapsed: 5456099,
            runningSince: Date.now()
        },
        {
            title: 'Bake squash',
            project: 'Kitchen Chores',
            id: v4(),
            elapsed: 1273998,
            runningSince: null
        },
      ],
    };

  this.func = this.func.bind(this);
  this.stopTimer = this.stopTimer.bind(this); //<--"Uncaught TypeError: this.stopTimer is 
// not a function"
 } 

 func(timerId) {
        this.stopTimer(timerId);
 }

 stopTimer(timerId) {
    const now = Date.now();

    this.setState({
        timers: this.state.timers.map((timer) => {
            if(timer.id === timerId) {
                const lastElapsed = now - timer.runningSince;
                return Object.assign({}, timer, {
                    elapsed: timer.elapsed + lastElapsed,
                    runningSince: null
                });
            } else {
                return timer;
            }
        }),
    });
}

 render() {
  return (
   <AppTwo handleFuncFromAppOne = {this.func} timers={this.state.timers} />
  );
 }
}

class AppTwo extends React.Component {
 handleFuncFromAppTwo() {
  this.props.handleFuncFromAppOne(this.props.timers.id)
 }
 render() {
  return(
   <AppThree handleFuncFromAppThree={this.handleFuncFromAppTwo} />
  );
 }
}

class AppThree extends React.Component {
 render() {
  return (
   <div
    className='ui bottom attached red basic button'
    onClick={this.props.handleFuncFromAppThree} // I want to invoke here
   >
    Stop
   </div>
  );
 }
}

//第二类

 render() {
  return(
   <AppThree parentObje={this} /> //pass reference not function
  );
 }

//class AppThree

<div
    className='ui bottom attached red basic button'
    onClick={this.props.parentObj.handleFuncFromAppThree()} // invoke the //function like this
   >

你也可以用同样的方法来上课

---

干杯：

你为什么从“func”呼叫stopTimer？它是什么时候产生这个错误的？在构造函数中还是在调用func时？另外，如果您已经包装了func，它将把它作为上下文，所以您不需要包装stopTimer@Kinnza，在我的原始代码中，它是一个单独的组件，是组件中的一组按钮，id作为道具在AppTwo上传递，并在AppTwo上调用。@iamnewie和kinnza我想我回答了你的问题它确实有效！谢谢，但是还有别的方法吗？比如，你不必把parentObj道具从一个孩子传递给另一个孩子？是的，这不是这样做的，你不应该把父对象传递给子对象。。。。如果从父级传递方法，则将其绑定到父级而不是组件内部。