javascript - React-Native如何在另一个JavaScript文件中使用状态值

我想使用一个值，从Step4.js中的文件Step3.js中，该值可以在用户在Step3中输入后更改。但是如何在Step4中使用此值？

我已经尝试了一些方法，但是我想我在这里没讲到重点，所以希望有人可以帮助我解决这个问题。

这是我的代码：

App.js：

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, View, Text } from 'react-native'
import { ViewPager } from 'rn-viewpager'

import StepIndicator from 'react-native-step-indicator'

import Step1 from "./Step1";
import Step2 from "./Step2";
import Step3 from "./Step3";
import Step4 from "./Step4";

const PAGES = [{id: 1, page: <Step1/>},{id: 2, page: <Step2/>}, {id: 3, page: <Step3/>}, {id: 4, page: <Step4/>}];

const firstIndicatorStyles = {
    stepIndicatorSize: 30,
    currentStepIndicatorSize: 40,
    separatorStrokeWidth: 5,
    currentStepStrokeWidth: 3,
    separatorFinishedColor: '#4aae4f',
    separatorUnFinishedColor: '#a4d4a5',
    stepIndicatorFinishedColor: '#4aae4f',
    stepIndicatorUnFinishedColor: '#a4d4a5',
    stepIndicatorCurrentColor: '#ffffff',
    stepIndicatorLabelFontSize: 15,
    currentStepIndicatorLabelFontSize: 15,
    stepIndicatorLabelCurrentColor: '#000000',
    stepIndicatorLabelFinishedColor: '#ffffff',
    stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
    labelColor: '#666666',
    labelSize: 12,
    currentStepLabelColor: '#4aae4f'
};



export default class App extends Component {
    constructor (props) {
        super(props);
        this.state = {
            currentPosition: 0,
            stepCount: 4,
        }
    }

    componentWillReceiveProps (nextProps, nextState) {
        if (nextState.currentPosition != this.state.currentPosition) {
            if (this.viewPager) {
                this.viewPager.setPage(nextState.currentPosition)
            }
        }
    }

    render () {
        return (
            <View style={styles.container}>
                <ViewPager
                    style={{ flexGrow: 1 }}
                    ref={viewPager => {
                        this.viewPager = viewPager
                    }}
                    onPageSelected={page => {
                        this.setState({ currentPosition: page.position })
                    }}
                >
                    {PAGES.map(page => this.renderViewPagerPage(page))}
                </ViewPager>
                <View style={styles.stepIndicator}>
                    <StepIndicator
                        customStyles={firstIndicatorStyles}
                        currentPosition={this.state.currentPosition}
                        stepCount={this.state.stepCount}
                        labels={['Kleur', 'Vorm', 'Moeite', 'Overzicht']}
                    />
                </View>
            </View>
        )
    }

    renderViewPagerPage = (data) => {
        console.log(data);
        console.log(this.state.currentPosition);
        return (
            <View key={data.id}>
                {data.page}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff'
    },
    stepIndicator: {
        marginVertical: 20
    },
});

Step3.js：

export function getSelected3() {
    return this.state.selected;
}

class Step3 extends Component {
    constructor(props){
        super(props);
        this.state = {
            happy: {
                "id" : "1",
                "name" : "happy",
                "src" : require('../../assets/images/makkelijk.png')
            },
            normal: {
                "id" : "2",
                "name" : "normal",
                "src" : require('../../assets/images/gemiddeld.png'),
            },
            sad: {
                "id" : "3",
                "name" : "sad",
                "src" : require('../../assets/images/moeilijk.png'),
            },
            selected: {
                "id" : "4",
                "name" : "",
                "src" : require('../../assets/images/moeilijk.png'),
            },
        };
    }

    onPress = (item) => {
        this.state.selected.name = item.name;
        this.state.selected.src = item.src;
        alert(this.state.selected.name);
    };

    render() {
        return  (
            <View style={styles.container}>
                <View style={[styles.box]}>
                    <TouchableHighlight onPress={() => this.onPress(this.state.happy)}>
                        <Image
                            style={styles.image}
                            source={this.state.happy.src}
                        />
                    </TouchableHighlight>
                </View>
                <View style={[styles.box]}>
                    <TouchableHighlight onPress={() => this.onPress(this.state.normal)}>
                        <Image
                            style={styles.image}
                            source={this.state.normal.src}
                        />
                    </TouchableHighlight>
                </View>
                <View style={[styles.box]}>
                    <TouchableHighlight onPress={() => this.onPress(this.state.sad)}>
                        <Image
                            style={styles.image}
                            source={this.state.sad.src}
                        />
                    </TouchableHighlight>
                </View>
            </View>
        )
    }
}

因此，我想使用从Step3中进入Step4.js的状态中选择的日期，我该怎么做？

Step4.js：

class Step4 extends Component {
constructor(props) {
    super(props);
    this.state = {
        value3: {
            "id": "3",
            "name" : "",
            "src" : "",
        },
    };
}

render() {

    let test = getSelected3();
    this.state.value3.src = value3.src;
    return (
        <View style={styles.container}>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
        </View>
    )
}

最佳答案

建议您将Step3和Step4组件设置为无状态，使其仅接收道具，并创建一个组件Stepper，该组件将同时渲染Step3和Step4。步进器组件将执行所有状态操作。

class Stepper extents Component {
    render() {
        const { state1, state2, state3, state4, onPress } = this.state;

        return [
            <Step3 state1={state1} state3={state3} onPress={onPress} />,
            <Step4 state2={state2} state4={state4}  />
        ];
    }
}

Step3看起来像这样：

const Step3 = ({ state1, state2, onPress }) => {
    return (<TouchableHighlight onPress={onPress}></TouchableHighlight);
};

希望你能明白。