React Native-在同一组件中修改道具

Question

I have simple questions:

1. Is it possible to modify a prop (not state) within a React Native component (not from parent component)?

2. Following [1], if I want to modify a prop within the same component, how can I achieve that (or workarounds if answer in [1] is No)?

3. If I have the following:

//Parent

render(){
  return <View><ChildComponent propA={this.state.propA} /></View>
}

triggerChangeInParent(val) {
  this.setState({
    propA: val
  });
}

//Child (ChildComponent)

render() {
  return <View><Text>{this.props.propA}</Text></View>
}

triggerChangeInChild(val) {
  //To set props.propA here
}

Both parent and child components are allowed to modify "propA". Whoever triggers the latest will have its value taken precedence for modifying "propA" (eg if "triggerChangeInChild" is triggered after "triggerChangeInParent", then "val" from "triggerChangeInChild" will be used for "propA".

My question is, how do we achieve that (what possible solutions/alternatives to solve this problem)? What is the best practice/pattern?

Thanks!

Answer 1

1. State is mutable and props is immutable, so you can't modify the props within component. Please do it outside the current component. If you're using redux, you can do it in a reducer.

2. You should modify the propA on parent only, please write a method in parent, then pass it to child via prop. So you can call the method from child, mean that you make the change inside child.

   Parent

    contractor(props){ super(props) this.modifyPropsOnParent = this.modifyPropsOnParent.bind(this) } modifyPropsOnParent(){ // do your change here } render() { return <Child modifyPropsOnParent={this.modifyPropsOnParent} otherProp={yourProps} /> } 

Child can call the parent method by this.props. modifyPropsOnParent()