Reactjs 从 child 传递道具

Question

我从 child 得到了属性但我怎样才能传递给 parent？

在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 /> 组件的代码吗？确保该函数没有被直接调用，并且仅由箭头函数引用，正如我在第二个 child 中指出的那样，或者如果您正在编写 class 函数

，则通过方法引用

// in SecondChild

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

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

Answer 3

通过函数将任何东西从 child 传递到 parent 非常简单。

假设您有这样的 parent

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 从 child 传递道具

Reactjs Passing props from the child

reactjs

react-props