Javascript 在React Native中从父级更新子属性

我希望能够根据上一个事件从父组件和子组件本身更新子组件属性

例如：

class MyParent extends Component {
  state ={
    text:"";
  }
  render() {
    return (
      <View>
        <MyChild text={this.state.text} />
        <Button
          onPress={()=>this.setState({text:"parent"})}
          title="Update From Parent"
        />
     </View>
   );
  }
} 


class MyChild extends Component {
    state ={
      text:"";
    }

    componentWillReceiveProps(nextProps) {
    if (nextProps.text!== this.state.text) {
       this.setState({text:nextProps.text});
    }
}

render() {
    return (
      <View>
        {/* I want that the text field will be updated from the last event*/}
        <Text>{this.state.text}</Text>
        <Button
            onPress={()=>this.setState({text:"child"})}
            title="Update From Child"
        />
      </View>
   );
  }
} 

类MyParent扩展组件{
陈述={
案文：“；
}
render（）{
返回(
this.setState（{text:“parent”}）
title=“从父级更新”
/>
);
}
} 
类MyChild扩展组件{
陈述={
案文：“；
}
组件将接收道具（下一步）{
if（nextrops.text！==this.state.text）{
this.setState（{text:nextrops.text}）；
}
}
render（）{
返回(
{/*我希望文本字段将从上次事件更新*/}
{this.state.text}
this.setState（{text:“child”}）
title=“从子级更新”
/>
);
}
} 

问题是每次调用setState时都会触发componentWillReceiveProps，因此text属性从父级而不是子级获取值

我怎样才能得到这个结果

非常感谢

---

Elad

通过

父组件

管理您的

状态

，并

传递
将更新
子组件中父组件
状态的
功能

class MyParent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: "",
      updateParentState: (newState) => this.setState(newState)
    }
  }

  render() {
    let { text, updateParentState } = this.state;
    return (
      <View>
        <MyChild data={{ text, updateParentState }} />
        <Button
          onPress={() => updateParentState({ text: "parent" })}
          title="Update From Parent"
        />
      </View>
    );
  }
}


class MyChild extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: props.data.text
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.text !== this.state.text) {
      this.setState({ text: nextProps.data.text });
    }
  }

  render() {
    let { updateParentState } = this.props.data;
    return (
      <View>
        <Text>{this.state.text}</Text>
        <Button
          onPress={() => updateParentState({ text: "child" })}
          title="Update From Child"
        />
      </View>
    );
  }
}

类MyParent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
正文：“，
updateParentState:（newState）=>this.setState（newState）
}
}
render（）{
让{text，updateParentState}=this.state；
返回(
updateParentState（{text:“parent”}）}
title=“从父级更新”
/>
);
}
}
类MyChild扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文本：props.data.text
}
}
组件将接收道具（下一步）{
if（nextrops.text！==this.state.text）{
this.setState（{text:nextrops.data.text}）；
}
}
render（）{
让{updateParentState}=this.props.data；
返回(
{this.state.text}
updateParentState（{text:“child”}）}
title=“从子级更新”
/>
);
}
}
您缺少这个。在setState中调用子对象。请检查这是否不是问题所在

<Button
  onPress={()=>setState({text:"child"})}
  title="Update From Child"
/>

setState（{text:“child”}）
title=“从子级更新”
/>

应该是

<Button
  onPress={()=>this.setState({text:"child"})}
  title="Update From Child"
/>

this.setState（{text:“child”}）
title=“从子级更新”
/>
谢谢，这是个打字错误。我就在这里写了这个例子，所以之前我没有检查这个例子。我修好了，好主意。顺便说一句，我很好奇为什么要在状态中插入updateParentState函数，而不是直接将其添加到类中？是的，这也是一个选项。但我选择了这条路。没有技术术语。：）