Question

在我的情况下，我有一个名为App的根组件。

在我的App组件渲染功能中，我还有另外两个反应组件。 ModalWrapper是第一个组件，它有一个名为closeModal（）的方法，我希望能够从其子组件AddUser中调用它。无论如何将此方法传递给addUser而不将AddUser调用移动到ModalWrapper渲染函数？

＆＃13;

render() {
  return (
    <div> 
      <ModalWrapper title="Add Member" buttonText="Add Member">
        <AddUser />
      </ModalWrapper>
    <div>
   )
}

＆＃13;

Answer 1

class Parent extends Component {
 constructor(props){
  super(props);
  this.closeModal = this.closeModal.bind(this);
 }
 closeModal(){
  alert('close Modal');
 }
 render(){
  return(
   <div>
     <ChildComponent closeModal = {this.closeModal} />
   </div>
  ); 
}
}

class ChildComponent extends Component {
 constructor(props){
  super(props);
 }
 componentDidMount(){
  this.props.closeModal();
 }
 render(){
  return(<div> </div>);
 }
}

假设您有父组件，并在父组件中定义一个函数，并希望将该函数用于子组件。您可以通过props传递父组件函数到子组件。并通过props调用子组件中的父函数。

React在嵌套在同一组件中的组件之间传递数据？

1 个答案: