React Native不更新子组件道具

Question

我正在处理React Native项目，并且我意识到React Native似乎打破了React流（Parent to children）道具更新。

基本上，我从一个“App”组件调用一个“Menu”组件，将一个道具传递给“Menu”。但是，当我更新“应用程序”状态时，“菜单”上的道具应该更新，但这不会发生。难道我做错了什么？

这是我的代码：

App.js

import React from 'react'; 
import { 
View, 
Text 
} from 'react-native'; 

import Menu from './Menu'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     opacity: 2 
    } 
    } 

    componentDidMount() { 
    setTimeout(() => { 
     this.setState({ 
     opacity: 4 
     }); 
    }, 3000); 
    } 

    render() { 
    return(
     <View> 
     <Menu propOpacity={this.state.opacity} /> 
     </View> 
    ); 
    } 
} 

export default App; 

Menu.js

import React from 'react'; 
import { 
View, 
Text 
} from 'react-native'; 

class Menu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     menuOpacity: props.propOpacity 
    } 
    } 

    render() { 
    return(
     <View> 
     <Text>Menu opacity: {this.state.menuOpacity}</Text> 
     </View> 
    ); 
    } 
} 

Menu.propTypes = { 
    propOpacity: React.PropTypes.number 
} 

Menu.defaultProps = { 
    propOpacity: 1 
} 

export default Menu; 

Answer 1

REACT为没有违反数据流...你。在初始状态初始化之后，当父母发送更新的道具时，您忘记稍后更新菜单的状态。

尝试......

class Menu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     menuOpacity: props.propOpacity 
    } 
    } 

    componentWillUpdate(nextProps, nextState) { 
     nextState.menuOpacity = nextProps.propOpacity; 
    } 

    render() { 
    return(
     <View> 
     <Text>Menu opacity: {this.state.menuOpacity}</Text> 
     </View> 
    ); 
    } 
}