Question

我是从孩子那里获得财产的，但是我该如何转让给父母？

在parent.js中

<Child childId={() => this.getchildId()} />

getchildId = (id) => { 
   // do something 
   console.log(id) // return undefined
}

在child.js中

const id = "something";

<Item itemid={this.getId(id)} />

getId = (id) => { 
    console.log(id); // return "something"
    this.props.childId(id)
}

更新！ 它适用于

在parent.js中

<Child childId={this.getchildId} />

现在的问题是，他们一直被称为...

Answer 1

<Child childId={this.getchildId} />

getchildId = (id) => { 
 // do something 
 console.log(id) // return undefined
 }

在parent.js中，只需传递函数引用即可。

Answer 2

// in parent
getchildId = (id) => { 
   // do something 
   console.log(id) // return undefined
}

<FirstChild logChildId={this.getchildId}


// in FirstChild 
<SecondChild logChildId={props.logChildId} />

// in SecondChild
<button onClick={() => props.logChildId("test")}>
click me
</button>

所以它只是通过props传递给函数指针

您可以显示<Item />组件的代码吗？确保该函数不被直接调用，而仅由箭头函数引用，就像我在第二个孩子中所指出的那样；如果要编写类函数，则通过方法来引用

// in SecondChild

handleLogChildId = (id) => {
  const { logChildId } = this.props
  logChildId(id)
}

<button onClick={this.handleLogChildId("test")}>
click me
</button>

Answer 3

通过函数将任何东西从孩子传递到父母都很简单。

假设您有这样的父母

class Parent extends Component {
 constructor(props){
  this._getProps = this._getProps.bind(this);
 }
 _getProps(data) { // Here you will receive the props data from child component.
  console.log(data);
 }
 render(){
  return (
   <Child getProps = {this._getProps}/>
  );
 }
}


class Child extends Component {
 constructor(props){
  this._sendProps = this._sendProps.bind(this);
 }
 _sendProps(data) {
  this.props.getProps(data); // This will send your props data to parent function.
 }
 render(){
  return (
   <div> </div>
  );
 }
}

Reactjs从孩子那里传递道具

3 个答案: