2017-02-15 13 views
1

多くのボタンを持つChooseLevelコンポーネントがあります。ボタンをクリックすると、onLevelSelected関数が呼び出され、アクションタイプを返すアクションクリエータが呼び出され、さらにqPageコンポーネントにリダイレクトされます。 qPageコンポーネントでは計算をいくつか行い、その結果を合計変数に入れます。 は、ここに私のコードです:1つのコンポーネントから別のコンポーネントに変数を渡します。ネイティブで反応します。

import { Actions } from 'react-native-router-flux'; 
export const levelSelected = (levelNumber) => { 
    return (dispatch) => { 
     dispatch({ 
     type: 'level_selected', 
     payload: levelNumber 
     }); 
     Actions.qPage(); // redirects me to qPage component 
    }; 
}; 

qPage.js

class qPage extends Component { 
    constructor(props){ 
     ... 
    } 
    calc(){ 
     .... some calculation 
     total = result of previous calculation 
    } 
    render(){ 
    .... 
    .... 
    } 
} 

ChooseLevel.js

class ChooseLevel extends Component { 
    constructor(props) { 
     super(props); 
    } 
    onLevelSelected(levelNumber) { 
     this.props.levelSelected(levelNumber); 
    } 

    render(){ 
     <Button key={1} onPress={this.onLevelSelected.bind(this, 1)}> 
     <Button key={2} onPress={this.onLevelSelected.bind(this, 2)}> 
     <Button key={3} onPress={this.onLevelSelected.bind(this, 3)}> 
     .... 
    } 
} 

マイアクションの作成者は次のようになります

合計をqPageからChooseLevelページに渡すにはどうすればよいですか?

1)1つの以上のアクションを作成し、そのアクション内の計算値を渡す:あなたがする必要がどのような

+0

qpageには何かレンダリングがありますか? – Codesingh

+0

はい、私はコードの一部を省略しました。 – splunk

+0

あなたはreduxを使用していますか? – Codesingh

答えて

1

は、私は一歩一歩を行く、です。小道具を通じて価値を計算

2)アクセス(減速)

3)あなたはこのfuctionの内部クラスの状態にこの新しい小道具を割り当て、componentWillUpdateProp(nextprops)を使用することができます。

乾杯:

+0

私はこの手順に従ってきました。今MapStateToProps関数(これはChooseLevel.jsファイルにあります)を正しくconsole.log totalの値にすることができます。私がrender()メソッドの中で印刷すると、正常に表示されます。私の問題は、今、私はconsole.log(this.props.total)内のcomponentWillReceiveProps()にしようとしているが、それは私が定義されていない返す – splunk

+0

私にコードを表示してください – Codesingh

関連する問題