React Native не обновляет реквизиты дочерних компонентов

Question

Я работаю над проектом React Native, и я понял, что React Native, похоже, нарушает обновление реквизитов React flow (Parent to children).

В принципе, я вызываю компонент «Меню» из компонента «Приложение», передавая подсказку «Меню». Однако, когда я обновляю состояние «App», реквизиты в «Меню» должны обновляться, но этого не происходит. Я делаю что-то неправильно?

Вот мой код:

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

Реагировать не нарушает поток данных ... Вы. После инициализации начального состояния вы забыли обновить состояние меню позже, когда родитель отправит обновленные реквизиты.

Попробуйте это ...

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> 
    ); 
    } 
}