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

我有一个主要组件，

App

，它有两个子组件，

Player

和

VideoList

，其中

Player

是一个包装器，主要基于

react Player

演示

Player

有一个方法

renderLoadButton（）

，该方法创建一个按钮，单击该按钮可加载特定视频。我希望在我的

VideoList

组件中有几个这样的按钮

我试图将

renderLoadButton（）

函数向上传递到父组件中，然后向下传递到

VideoList

组件中，在那里我可以调用它

下面是父组件的

render（）

函数的代码。这里实例化了我的

和

组件

我在评论中提到的行中得到以下错误

TypeError:无法读取未定义的属性“renderLoadButton”

render（）{
const dragHandlers={onStart:this.onStart，onStop:this.onStop}；
const{deltaPosition，controlledPosition}=this.state；
返回(
{this.player=instance}}title=“VIDEO”url=https://streamable.com/nfec3'/>
{/*下一行出现错误*/}
this.player.renderLoadButton（x，y）}/>
无线电广播
);
}

当使用此.METHOD\u名称时，必须使用该方法的首字母

constructor(props){
  super(props);
  this.renderLoadButton = this.renderLoadButton.bind(this);
}

renderLoadButton(x,y){
  console.log(x,y); // for example
}

render(){
  return(
    ...
      <VideoList callback={this.renderLoadButton}/>
    ...
  )
}

构造函数（道具）{
超级（道具）；
this.renderLoadButton=this.renderLoadButton.bind（this）；
}
renderLoadButton（x，y）{
console.log（x，y）；//例如
}
render（）{
返回(
...
...
)
}

如果要使用其他类的静态方法，请先导入类，然后使用以下静态方法：

import Player from 'PLAYER_FILE_LOCATION';
.
.
.
.
.
render(){
  return(
    ...
    <VideoList callback={Player.renderLoadButton}/>
    ...
  )
}

从“播放器文件位置”导入播放器；
.
.
.
.
.
render（）{
返回(
...
...
)
}

根据您提供的代码，您做得很好，我创建了与您类似的工作模型，工作正常：

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

编辑

代码的问题不在于

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类实例，并从中提取函数，然后将其作为道具传递给videoList，并在render return中调用它

因此，您的

应用程序
组件应该如下所示：

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

以下是工作代码：

编辑2:

我认为那是不可能的。您可以做的一件事是在每个地方使用相同的jsx，并在每个地方使用另一个函数作为道具再次调用。像这样：
this.player.renderLoadButton
-如何定义
this.player
？是不是应该是
this.renderLoadButton
（没有
player
）？@Alex
这个.player
定义在以
renderLoadButton（）开头的行上，虽然它不是一个静态方法，但它是另一个组件的正常方法，我想在该类的一个实例上调用它。@user3504732在本例中作为道具发送方法到子组件，并从子组件内部调用它们。例如，在VideoList组件中调用this.props.callback这就是我正在做的。如果你想看到，这里有一个沙盒，里面有我的代码的简化版本@user3504732我编辑了你的代码并修复了bug，请检查一下，就像我之前说的，我不想要一个静态函数。检查我的交换上面的另一个答案，看看我的问题。有趣的是，这似乎正是我想做的。我看不出这和我的代码之间有什么区别。这就是为什么我要求你将代码添加到沙盒中，这样我就可以知道问题出在哪里。谢谢，我在沙盒中添加了一个简化版本的代码，直到它以我在原始帖子中描述的相同方式崩溃。你可以在这里@user3504732看到编辑我在以前的答案中添加了我的新答案谢谢，这非常有帮助，但在我的真实代码中，
renderLoadButton
函数必须设置
Player
的状态，因此我需要访问渲染的实际
Player
实例，而不是另一个实例。看到我的问题了吗
    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>
    );
  }
}

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