Как отличить разные родительские классы в React Native - PullRequest
Новая
       10

Как отличить разные родительские классы в React Native

0 голосов
/ 24 сентября 2018

Скажем, у меня есть этот компонент-обертка: 

export class WrapperComponent extends React.Component {

    constructor(props) {
        super(props);

        this.opacity = 1
        this.editable = true
        this.placeholder = ''

        this.state = {
            text: ''
        }
    }

    makeInvisible() {
        this.opacity = 0
        this.editable = false
    }
    makeVisible() {
        this.opacity = 1
        this.editable = true
    }

    setPlaceHolder(placeHolder) {
        this.placeHolder = placeholder
    }

    getText() {
        return this.state.text
    }

    render() {
        return (
            <View style = {styles.horizontalView}>
                {this.props.children}
                <TextInput
                    placeholder = "day"
                    style={styles.textInput}
                    opacity = {this.opacity}
                    editable = {this.editable}

                    onChangeText = {(text) => {
                        this.setState({text: text })

                    }}
                />
            </View>
        )
    }
}

И у меня есть другой класс, который использует этот класс WrapperComponent, например: 

export class ClassUsingWrapperComponent extends React.Component {

    this.wrapper = new WrapperComponent()
    this.wrapper.makeInvisible()
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <WrapperComponent>

            </WrapperComponent>

            <WrapperComponent>

            </WrapperComponent>

            <WrapperComponent>

            </WrapperComponent>


        )
    }
}

У меня здесь три компонента WrapperComponent, но я простохочу сделать одного невидимым, оставляя других видимыми.Как бы я различил, какой WrapperComponent становится невидимым?

Большое спасибо за вашу помощь.

1 Ответ

0 голосов
/ 24 сентября 2018

opacity и editable должны быть реквизитами вашего WrapperComponent, вы можете просто иметь visible реквизит и рендерить несколько оберток следующим образом: 

 render() {
     return (
         <WrapperComponent visible />
         <WrapperComponent visible={false} />
     )
 }

и затем в вас WrapperComponent: 

render() {
    return (
        <View style = {styles.horizontalView}>
            {this.props.children}
            <TextInput
                placeholder = "day"
                style={styles.textInput}
                opacity = {this.props.visible? 1 : 0}
                editable = {this.props.visible}

                onChangeText = {(text) => {
                    this.setState({text: text })

                }}
            />
        </View>
    )
}

Вы должны затем удалить методы makeInvisible и makeVisible

Вы можете ознакомиться с документами React Native props , если у вас есть какие-либосомнения

...