Question

我刚刚开始使用ReactJS，所以我仍然掌握它。我需要一个方面的帮助，但是我没有找到答案。我试图从子组件中调用父组件中的函数，但我也想从父组件中接收包含一些数据的答案。我该如何实现？目前我正在做的是：

import Parent from './parent.js';
class Child extends React.Component {
    constructor(props) {
        super(props);
        };

    click = () => {
        this.props.parentMethod();
    }

    render() {
          <div onClick={this.click}>Hello Child</div>
    }
}

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

    someMethod() {
        console.log('bar');
    }

    render() {
          <Child parentMethod={this.someMethod}>Hello Parent, {this.props.children}</Child>
    }
}

Answer 1

您通常不会这样做。数据来自React中的父»子流。因此，如果在Parent上执行函数更改了传递给Child的数据，则您的Child组件将重新呈现。

使用您的示例：

class Child extends React.Component {
  render() {
    <div onClick={this.props.changeName}>
      Hello, {this.props.displayName}
    </div>
  }
}

class Parent extends React.Component {
  constructor(){
    this.state = {
      name: "Bob",
    }
  }

  changeName = () => {
    this.setState({ name: "Sally" })
  }

  render() {
    return(
      <Child
        changeName={this.changeName}
        displayName={this.state.name}
      />
    )
  }
}

在此情况下，单击div内的Child将更改name的{{1}}的{{1}}属性，然后将其传递给{ {1}}，然后重新渲染。

Answer 2

您可以将数据保留在父组件的状态下，并将其传递给子组件。调用函数后，该数据在父级中更改，然后再次返回子级。顺便说一下，您在return方法中缺少了render个。寻找它。

const Child = ( props ) => {
  const click = () => {
    props.parentMethod();
  }
    
  return (
      <div onClick={click}>
          Hello, this is Child.
          Data is now: {!props.data ? "No data yet!" : props.data }
      </div>
    );
}

class Parent extends React.Component {
  state = {
    data: "",
  }
 
  someMethod = () =>
    this.setState({ data: "bar"});

  render() {
    return (
      <Child data={this.state.data} parentMethod={this.someMethod} />
    );
    
  }
}


ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

ReactJS-从子组件调用父方法并等待父组件的响应

2 个答案: