反应如何将方法发送到 childComponent

Question

我无法在反应中将方法从父母发送给孩子。我以前做过这个并且它有效......为什么它不再有效了？我正在渲染这个：<div>     <ScheduleSelectModal colupdate={this.updateColumn.bind(this)} subject={this.state.selectedSubject} subjectslist={this.state.mySubjects} show={this.state.modalShow} onHide={this.changeModalState.bind(this)}>                </ScheduleSelectModal>            </div>这是我的方法：    updateColumn(newSubject,dayId){        console.log("tu som");        console.log(this.state.schedule);    }我的模态： ScheduleSelectModal extends Component {   componentDidUpdate(prevProps, prevState, snapshot) {       console.log("modal props:");       console.log(this.props.subject);   }   update(){       console.log("updating...");       this.props.updatecolumn("test","test");   }    createList() {        let items = [];        if (this.props.subjectslist !== null)            this.props.subjectslist.map(subject =>                items.push(<Button key={subject.id} block className={"my-1"} onClick={this.update.bind(this)}>{subject.name} </Button>)            );        return items;    }    render() {        return (            <Modal                {...this.props}                size="lg"                aria-labelledby="contained-modal-title-vcenter"                centered            >                <Modal.Header closeButton>                    <Modal.Title id="contained-modal-title-vcenter">                        {this.renderHeader()}                    </Modal.Title>                </Modal.Header>                <Modal.Body>                    <ButtonGroup vertical className={"w-100"}>                        {this.createList()}                    </ButtonGroup>                </Modal.Body>            </Modal>        );    }}这是我得到的警告：index.js:1375 Warning: Invalid value for prop `colupdate` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.真的不知道是什么问题。谢谢帮助

Answer 1

class ParentComponent extends Component {

    passedFunction = () => {}

    render() {

      <ChildComponent passedFunction={this.passedFunction}/>

    }

}

class ChildComponent extends Component {

    render() {

        <div onClick={this.props.passedFunction}></div>

    }

}

您可以使用箭头功能来避免所有绑定。如果要绑定它，请在构造函数中绑定它，就像这样......在父组件中。

constructor() {

        this.passedFunction = this.passedFunction.bind(this)

    }

<ChildComponent passedFunction={this.passedFunction}/>

我可以看到，在您使用的子组件中：

update(){

       console.log("updating...");

       this.props.updatecolumn("test","test");

   }

但是您对该功能的道具是 colupdate 即您应该使用

update(){

           console.log("updating...");

          this.porps.colupdate("test","test");

       }

希望这可以帮助！