反应原生中呈现子组件而不是父组件

Question

The child component not being rendered on a change in parent component

I have a parent component that has a dropdown. I need to update a child component when the dropdown changes but without rendering the parent component.

const CrewsAdapter = props => {
  let crewName = 'jack nickelson';
  if(props.data.loading) {
    return <View><Text>Loading crews</Text></View>
  }
  if(props.data.getAllCrews) {
      crewsNames= props.data.getAllCrews.map(crew => ({"value": crew.crewName}));
    return (
          <View style={{ flexDirection: 'column', alignItems: 'center', backgroundColor: '#ffffff' }}>
            <View style={[styles.container, { flex: 0.25 }]}>
              <Text style={styles.headerText}>Crews</Text>
            </View>
            <View style={{ flexDirection: 'row' }}>
              <View style={{ flex: 0.9 }}>
                <Dropdown label="Crews List"
                          data={crewsNames}
                          onChangeText = {(value) => {crewName = value}}
                />
              </View>
            </View>
            <View style={{ flexDirection: 'row' }}>
            <Crew crewName={crewName}/>
            </View>
          </View>
    );
  }
  return <View><Text>No data</Text></View>
};

export default class CrewsScreen extends Component {
  constructor(props) {
    super(props);
    this.stateHandler = this.stateHandler.bind(this);
    this.state = {
      crewName: '',
    }
  }

  stateHandler(value){
    this.setState({crewName: value});
    console.log('crewName: ' + this.state.crewName);
  }

  render() {
    const AllCrews = graphql(crewsList, {options: (props => ({}))})(CrewsAdapter);
    return (
        <SafeAreaView style={styles.screen}>
          <ToolBar />
          <AllCrews stateHandler = {this.stateHandler}/>
          <CrewsListFooter navProps={{...this.props}}/>
        </SafeAreaView>
    );
  }
}

When the value of the "Crews List" changes, I need to re-render the "Crew" component without re-rendering the parent since the dropdown is already generated from an api call.

Below is the constructor and componentWillRecieveProps fucntiosn for the Crew component.

export default class Crew extends Component {
    constructor(props) {
        super(props);
        this.state = {
            crewName: props.crewName
        }
    }
    componentWillReceiveProps({crewName}) {
        this.setState({...this.state,crewName})
    }

Answer 1

不幸的是，我不认为这是可能的，因为为了更新Crew组件，必须从父 - CrewList向下传递CrewList ，并且在CrewList组件中更改props，从而触发React生命周期的更改