Question

我的App.js中有导航屏幕，其中一个屏幕呈现自定义标头为：

const DailyStack = createStackNavigator({
  Dashboard,
  SalesDashboard: {
    screen : SalesDashboard,
    navigationOptions:{
      header: null,
    }
  },
  StackNavSecond : {
    screen: StackNavSecond, 
      navigationOptions : {
        header : <CustomHeader />,

      }
  },....

然后在我的CustomHeader.js文件中，我有一些状态数据：

class CustomHeader extends Component {

  constructor(props) {
    super(props)

    this.state = {
      title:'Regions',
      subtitle:'',
      oem: ''
    }
  }

 async componentDidMount(){

   let car_brand = await AsyncStorage.getItem('brand_name');
   let main_oem = await AsyncStorage.getItem('oem_name');

   await this.setState({
             oem: main_oem,
             subtitle: car_brand,
   });

   console.log(this.state.oem)
  }



render() {
    console.log(this.state.title)
   const {title, subtitle, oem} = this.state;
    return (
             <View>  
               <CustomDropdown title={title} subtitle={subtitle} oem={oem} /> 
             </View>
          )
     }
}

export default withNavigation(CustomHeader);

道具title不会传递给子组件，该子组件将在另外两个屏幕中进一步渲染。

CustomDropdown.js的代码是：

    class CustomDropdown extends Component {

        constructor(props) {
            super(props)

            this.state = {
                 title: '',
                 oem: '',
                 subtitle:''
            };
        }

        componentDidMount(){
           this.setState({
             title:this.props.title,
             subtitle: this.props.subtitle,
             oem: this.props.oem, 
           });
           console.log(this.state.title, this.state.oem, this.state.subtitle)
        }

        render() {
             return (
                <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
                  .........  
                </View>
            )
        }
    }


export default withNavigation(CustomDropdown);

当我控制台this.state.title时，它会打印但subtitle和oem却没有值。我什至尝试将控制台语句放在callback()的{{1}}中，但仍然没有oem和字幕显示道具。

请帮助解决此问题。

Answer 1

当您不想交付组件时，可以使用withNavigation。但是您的代码是深层嵌套的。

如果要这样使用，可以更改代码。

CustomHeader.js

class CustomHeader extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      title:'Regions',
      subtitle:'',
      oem: ''
    }
  }

 async componentDidMount(){

   let car_brand = await AsyncStorage.getItem('brand_name');
   let main_oem = await AsyncStorage.getItem('oem_name');

   this.setState({
             oem: main_oem,
             subtitle: car_brand,
   });

   console.log(this.state.oem)
  }


render() {
    console.log(this.state.title)
   const {title, subtitle, oem} = this.state;
    return (
             <View>  
               <CustomDropdown title={title} subtitle={subtitle} oem={oem} /> 
             </View>
          )
     }
}

export default withNavigation(CustomHeader);

CustomDropdown.js

    class CustomDropdown extends React.Component {

        constructor(props) {
            super(props);

            this.state = {
                 title: props.title,
                 oem: props.oem,
                 subtitle: props.subtitle
            };
        }

        componentDidMount(){
           console.log(this.state.title, this.state.oem, this.state.subtitle)
        }

        render() {
             return (
                <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
                  .........  
                </View>
            )
        }
    }


export default CustomDropdown;

无法将道具从父组件传递到子组件

1 个答案: