反应本机变量范围

时间:2018-07-25 13:34:27

标签: javascript reactjs react-native scope react-props

我有两个组件,一个父组件(ManySpace)和一个子组件(OtherComponent)。 OtherComponent呈现了两个ManySpace组件,这些组件具有用于Manyspace道具的两个不同的数组。

混淆第一个ManySpace组件和第二个ManySpace组件数组的内容。
例如,MANYSPACE1 answer1 = abc,MANYSPACE2 answer1 = cba,两个ManySpace组件answer1的输出是相同的非期望值。

我不使用const和let,因为在渲染范围之外使用变量,并且不使用类变量,因为我使用像这样的道具分配

MANYSPACE = this.props.manyspace;

onSubmitEditing1 = () => {
    if (secondinput) { this.secondref.focus(); }
    else if (thirdinput) { this.thirdref.focus(); }
    else { Keyboard.dismiss(); }
};

我如何解决此问题,谢谢。希望我能解释我的问题
ManySpace组件->

import React, { Component } from 'react'; //and other imports
let MANYSPACE;
let icerik;
let firsttext;
let firstinput;
let answer1;
let answerlength1;
let secondtext;
let secondinput;
class ManySpace extends Component {
    render() {
        MANYSPACE = this.props.manyspace;
        icerik = MANYSPACE[0].icerik;
        firsttext = MANYSPACE[0].firsttext;
        firstinput = MANYSPACE[0].firstinput;
        if (firstinput) {
            answer1 = MANYSPACE[0].firstinput.answer1;
            answerlength1 = answer1.length;
        }

        secondtext = MANYSPACE[0].secondtext;
        secondinput = MANYSPACE[0].secondinput;
        if (secondinput) {
            answer2 = MANYSPACE[0].secondinput.answer2;
            answerlength2 = answer2.length;
        }
        return ()
    }
}

-我的其他组件

import React, { Component } from 'react'; //and other imports
const MANYSPACE1 = [
    {
        icerik: 'lorem ipsum',
        firsttext: 'lorem ipsum',
        firstinput: {
            answer1: 'lorem ipsum'
        },
        secondtext: 'lorem ipsum'
    }
];

const MANYSPACE2 = [
    {
        icerik:'lorem ipsum',
        firsttext: 'lorem ipsum',
        firstinput: {
            answer1: 'lorem ipsum'
        },
        secondtext: 'lorem ipsum',
        secondinput: {
            answer2: 'lorem ipsum'
        },
        thirdinput: {
            answer3: 'lorem ipsum'
        }
    }
];  
class OtherComponent extends Component {
    <ManySpace
        manyspace={MANYSPACE1}
    />
    <ManySpace
        manyspace={MANYSPACE2}
    />
}

0 个答案:

没有答案