Question

我有一个子组件，一个父组件。我在子组件中有一个函数，该函数返回一些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;

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

//

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

Answer 1

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

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

Answer 2

我不太清楚您到底需要什么，但是我认为您正在寻求将一些jsx元素从Child组件传递到父组件。我们可以做的是在子组件上声明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;

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

2 个答案: