javascript - 如何将回调从一个子组件传递到另一个子组件

Question

我有一个主要组件，App ，它有两个子组件 Player ，和VideoList ，其中Player是 react-player 的包装，很大程度上基于react-player演示。

Player有一个方法renderLoadButton()它创建一个按钮，单击时加载特定视频。我想在我的 VideoList 中有几个这样的按钮组件。

我正在尝试通过 renderLoadButton()函数向上进入父组件，然后向下进入 VideoList我可以调用它的组件。

这是 render() 的代码父组件的功能。都是我的<Player/>和<VideoList/>此处实例化的组件。

我在评论中提到的行上收到以下错误。

TypeError: Cannot read property 'renderLoadButton' of undefined

render() {
    const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
    const {deltaPosition, controlledPosition} = this.state;

    return (
      <div className="App">
          <div className="fullscreen">

              <Draggable handle="strong" bounds={'body'}{...dragHandlers}>
                  <div style={{position: 'absolute', bottom: '30%', right: '50%'}} className="video-box no-cursor">
                      <Player ref={instance=>{this.player = instance}} title="VIDEO" url='https://streamable.com/nfec3'/>
                  </div>
              </Draggable>
              <Draggable handle="strong" bounds={'body'}{...dragHandlers}>

               <div>
                   {/*Error on the following line*/}
                   <VideoList callback = {(x,y)=> this.player.renderLoadButton(x,y)}/>
               </div>
              </Draggable>
          </div>

          <div className="App-footer">
              <img src={vinyl} className="App-logo" alt="logo" />
              <h1>Radio</h1>
          </div>
      </div>
    );
}

Answer 1

根据您提供的代码，您做得正确，我创建了与您类似的工作模型，它工作正常: https://codesandbox.io/s/6y5p9woqq3

您可以将代码添加到沙箱中，以便我们能够找出问题所在。

编辑

您的代码的问题不是 index.js 而是在 VideoList.js 中，根据您的最小代码VideoList.js:

    import React, { Component } from "react";

class VideoList extends Component {
  render() {
    console.log("dd");
    return this.props.callback('www.something.com','BUTTON');
  }
}
export default VideoList;

在这里，您尝试返回一个包含函数的 prop，该函数不是原始 jsx，为了更清楚起见，请尝试像这样的控制台日志记录 console.log("dd",this.props.callback)它显示了一个返回 this.player.renderLoadButton 函数的对象。因此，当您尝试返回它时，它仅返回一个无法呈现的函数，这会导致错误。

因此，如果您必须传递返回 jsx 的函数，请不要使用 ref。创建一个新的 obj 或 Player 类的实例并从中提取函数，然后将其作为 prop 传递给 videoList 并在渲染中调用它返回。

因此您的 App 组件应如下所示:

    class App extends Component {
  render() {
    const obj = new Player 
    const func = obj.renderLoadButton   
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Player title="VIDEO" url='https://streamable.com/nfec3'/>
        <VideoList func={func} />
      </div>
    );
  }
}

那么你的VideoList看起来像:

    class VideoList extends Component {
  render() {
    console.log("dd");
    return (
   <div>
     { this.props.func('www.something.com','BUTTON') }
    </div>
    )
  }
}
export default VideoList;

这是工作代码:https://codesandbox.io/s/jpqnxwyyy

编辑2:

我认为这样不可能。你可以做的一件事是在每个地方使用相同的 jsx 并在每个地方使用另一个函数作为 props 再次调用。像这样:https://codesandbox.io/s/7zwyl0yp3j