操纵同级组件的状态

Question

component A 

render(){ 
    <View> 
     {this.renderB()} 
     {this.renderC()} 
    </View> 
} 

component B 

super(props){ 
    this.state={text: (this.props.text) ? this.props.text : '' } 
} 
render(){ 
} 

component C 

super(props){ 
} 
render(){ 
    <View> 
     <TouchableHighlight onPress={ 
    ...here I want to modify text state of component B 
    }></TouchableHighlight> 
    </View> 
} 

是否可以像这样修改同级的状态？还是应该将text属性移到组件A？

Answer 1

当您需要在组件之间共享状态时，将该状态移至其共同的父级并通过道具向下推动它们。

以下是我所得到的要点。显然，你需要传递实际值。

class ComponentA extends React.Component{ 
    constructor(props){ 
    super(props); 

    this.state = { 
     text: '', 
    } 
    } 

    render(){ 
    return (
     <View> 
     <ComponentB text={this.state.text}> 
     <ComponentC onPress={(value) => this.setState({text: value})}> 
     </View> 
    ) 
    } 
} 

class ComponentB extends React.Component{ 
    render(){ 
    return(
     <Text>{this.props.text}</Text> 
    ) 
    } 
} 

class ComponentC extends React.Component{ 
    render(){ 
    return(
     <View> 
     <TouchableHighlight onPress={this.props.onPress} /> 
     </View> 
    ) 
    } 
}