は、ネイティブの子供の親通信に

Question

親子のコミュニケーションに反応することは、パスの小道具を使用しても問題がないようです：

mainpage.ios.jsコード：otherpage.ios.jsに続いて

var OtherPage = require('./otherpage'); 
<OtherPage value={2}/> 

私はこれを使用して変数を利用することができます.props.valueしかし、もし私がotherpage.ios.jsの値を更新すると、mainpage.ios.jsにどのように伝達されるのでしょうか？

Answer 1

あなたはあなたのセットアップは、より高度なにつれそうcomponentWillReceivePropsフックを利用して、小道具を通してそれを通過し、その後、コールバックを渡します。

これをやっているなら、FluxやReduxなどを使用する必要があります。あなたは状態が副成分で必要とされていない知っているときあなたは静的コンポーネントを利用すれば、あなたははるかに再使用可能な機能コンポーネントを構築することができます

さらに

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


class Main extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     data: 'default' 
    } 
    } 

    onChange = (data) => { 
    console.log(`Data changes to ${data} !`); 
    this.setState({ data }); 
    } 

    render() { 
    const { data } = this.state; 
    return <Other data={data} onChange={this.onChange}></Other>; 
    } 

} 

class Other extends Component { 
    render() { 
    const { data } = this.props; 
    console.log(`Other Component Data is ${data}`); 
    return (
     <TouchableOpacity onPress={() => {this.props.onChange('Success!')} }> 
     <Text style={{fontSize: 30}}>{data}</Text> 
     </TouchableOpacity> 
    ); 
    } 
} 

、：

class Main extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     data: 'default' 
    } 
    } 

    onChange = (data) => { 
    console.log(`Data changes to ${data} !`); 
    this.setState({ data }); 
    } 

    render() { 
    const { data } = this.state; 
    return <Other data={data} onChange={this.onChange}></Other>; 
    } 

} 

const Other = ({ data, onChange }) => { 
    return (
     <TouchableOpacity onPress={() => {onChange('Success!')} }> 
     <Text style={{fontSize: 30}}>{data}</Text> 
     </TouchableOpacity> 
); 
} 

Answer 2

ここでFluxを使用することを強くお勧めします。同じ情報を必要とするさまざまなコンポーネントが必要な場合は、Fluxが必要であることを意味します。もちろん、コールバックの束を使用することもできますが、アプリが成長し複雑になるにつれて、フラックスのようなものがなくてもそれを管理するのはずっと難しくなります。

フラックスを使用すると、メインページのコンポーネントに変更を聞かせて、変更が行われたら何かを実行します。たとえば：

mainpage: 

componentDidMount() { 
    SomeStore.addChangeListener(this.updateComponent) 
} 

componentWillUnmount() { 
    SomeStore.removeChangeListener(this.updateComponent) 
} 

updateComponent() { 
    this.setState value: SomeStore.getValue() 
} 



otherpage: 

toggle() { 
    SomeActions.change(this.props.value + 1) 
} 

render() { 
    <TouchableOpacity onPress={this.toggle}> 
    <View>Some View</View> 
    </ToucableOpacity> 
}