如何从父组件中的子组件呈现功能的jsx

Question

I am having a child component a parent component. I am having a function in child component which returns some jsx what i want to do is use that function to return the same jsx in parent component but iam unable to figure out a way to do that. I am giving my minimal code:

parent component:

    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;

Child component:

    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;

Error: Cannot read property 'func' of undefined

//

Note: i know i can use the jsx in parent component by copy-pasting but iam trying to figure out a way of doing like this. I am having doubt that is it even possible

Answer 1

您可以创建一个Player对象并使用该对象访问函数。

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

Answer 2

I don't quite understand what you need exactly but I think that you're looking to pass some jsx element from the Child component to the parent component. What we can do is declare a propType callback on the child component and then implement it on the parent component like so.

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;