如何使用父组件将一个子组件的props传递给另一个子组件

Question

1. 我想在Second Child中调用一个函数

const CallListRow = (props) => {
    return (
        <TableRow key={props.id}>
            <TableRowColumn>{props.id}</TableRowColumn>
            <TableRowColumn>{props.date}</TableRowColumn>
            <TableRowColumn>{props.callerId}</TableRowColumn>
            <TableRowColumn><Link label="Click to Call" to="javascript:void(0)" onClick={()=>dialPhone(props.phone)}  >{props.phone}</Link></TableRowColumn>
            <TableRowColumn>{props.duration}</TableRowColumn>
        </TableRow>
    );
}

2. 并且在onClick props.phone之后想要获得First Child组件

3. 两个子组件都在父组件中导入.

4. 那么如何在First Child组件中点击值???

Answer 1

您需要调用父函数来更新父级中的状态,然后将其作为prop传递给First Child

亲

..
changeSelected = (val) => {
     this.setState({selected: val})
}

render() {
  return (
     <div>
     <Firstchild selected={this.state.selected}/>
     <Secondchild changeSelected = {(val)=> {this.changeSelected(val)}}/>
     </div>
  )
}

第一个孩子:

render() {
    console.log(this.props.selected);
}

SecondChild:

handleClick = (val) => {
    this.props.changeSelected(val);
}