Javascript 如何从父组件中的子组件呈现函数的jsx

我有一个子组件和一个父组件。我在子组件中有一个函数，它返回一些jsx，我想做的是使用该函数返回父组件中相同的jsx，但我无法找到一种方法。我给出了我的最小代码：

父组件：

    class App extends Component {
  render() {
    return (
      <div className="App">
        <Player ref={instance=>{this.player = instance}} />
        {this.player.func('aaa.com','bbb')}
      </div>
    );
  }
}
  export default App;

    import React, { Component } from "react";

class Player extends Component {
  func = (url, label) => {
        return (
            <button onClick={() => this.func(url)}>
                {label}
            </button>
        )
    }
  render() {
    return <div>1</div>;
  }
}
export default Player;

类应用程序扩展组件{
render（）{
返回(
{this.player=instance}}/>
{this.player.func（'aaa.com'，'bbb'）}
);
}
}
导出默认应用程序；

子组件：

    class App extends Component {
  render() {
    return (
      <div className="App">
        <Player ref={instance=>{this.player = instance}} />
        {this.player.func('aaa.com','bbb')}
      </div>
    );
  }
}
  export default App;

    import React, { Component } from "react";

class Player extends Component {
  func = (url, label) => {
        return (
            <button onClick={() => this.func(url)}>
                {label}
            </button>
        )
    }
  render() {
    return <div>1</div>;
  }
}
export default Player;

import React，{Component}来自“React”；
类播放器扩展组件{
func=（url，标签）=>{
返回(
this.func（url）}>
{label}
)
}
render（）{
返回1；
}
}
导出默认播放器；

错误：无法读取未定义的属性“func”

//

注意：我知道我可以通过复制粘贴在父组件中使用jsx，但我正试图找到这样做的方法。我怀疑这是否可能

---

您可以创建一个

Player

对象，并使用该对象访问函数

new Player().func('aaa.com','bbb')

---

您可以创建一个

Player

对象，并使用该对象访问函数

new Player().func('aaa.com','bbb')

---

我不太明白您到底需要什么，但我认为您希望将一些jsx元素从子组件传递到父组件。我们可以做的是在子组件上声明一个propType回调，然后像这样在父组件上实现它

import React from 'react';

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      // this state will keep the element returned by the parent
      returnElements: null
    }
    this.onReturn = this.onReturn.bind(this);
  }

  // this method will be fired when the Child component returns callback for onSomethingReturned
  onReturn(element) {
    this.setState({
      returnElements: element
    })
  }
  render () {
    return (
      <div>
        <h1>Hello, React!</h1>
        <Child onSomethingReturned={this.onReturn} />
        {/* I am going to display the state here */}
        {this.state.returnElements}
      </div>
    )
  }
}

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

  componentDidMount() {
    const element = <h3>this is child element</h3>;
    // will call the propType callback function with a element I want to return
    this.props.onSomethingReturned(element);
  }

  render() {
    return (null);
  }
}


export default Hello;

从“React”导入React；
类Hello扩展了React.Component{
构造函数（）{
超级（）；
此.state={
//此状态将保留父级返回的元素
returnElements:null
}
this.onReturn=this.onReturn.bind（this）；
}
//当子组件返回onSomethingReturned的回调时，将激发此方法
返回时（元素）{
这是我的国家({
返回元素：元素
})
}
渲染（）{
返回(
你好，反应！
{/*我将在此处显示状态*/}
{this.state.returnElements}
)
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
常量元素=这是子元素；
//将使用要返回的元素调用propType回调函数
此.props.onSomethingReturned（元素）；
}
render（）{
返回（空）；
}
}
导出默认Hello；

我不太清楚您到底需要什么，但我认为您希望将一些jsx元素从子组件传递到父组件。我们可以做的是在子组件上声明一个propType回调，然后像这样在父组件上实现它

import React from 'react';

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      // this state will keep the element returned by the parent
      returnElements: null
    }
    this.onReturn = this.onReturn.bind(this);
  }

  // this method will be fired when the Child component returns callback for onSomethingReturned
  onReturn(element) {
    this.setState({
      returnElements: element
    })
  }
  render () {
    return (
      <div>
        <h1>Hello, React!</h1>
        <Child onSomethingReturned={this.onReturn} />
        {/* I am going to display the state here */}
        {this.state.returnElements}
      </div>
    )
  }
}

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

  componentDidMount() {
    const element = <h3>this is child element</h3>;
    // will call the propType callback function with a element I want to return
    this.props.onSomethingReturned(element);
  }

  render() {
    return (null);
  }
}


export default Hello;

从“React”导入React；
类Hello扩展了React.Component{
构造函数（）{
超级（）；
此.state={
//此状态将保留父级返回的元素
returnElements:null
}
this.onReturn=this.onReturn.bind（this）；
}
//当子组件返回onSomethingReturned的回调时，将激发此方法
返回时（元素）{
这是我的国家({
返回元素：元素
})
}
渲染（）{
返回(
你好，反应！
{/*我将在此处显示状态*/}
{this.state.returnElements}
)
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
常量元素=这是子元素；
//将使用要返回的元素调用propType回调函数
此.props.onSomethingReturned（元素）；
}
render（）{
返回（空）；
}
}
导出默认Hello；