React Native 中如何区分不同的parent 类

Question

假设我有这个包装组件：

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>
        )
    }
}

我还有另一个 class 像这样使用这个 WrapperComponent class：

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>


        )
    }
}

我这里有三个 WrapperComponents，但我只想让一个不可见，同时保持其他可见。我如何区分哪个 WrapperComponent 不可见？

非常感谢您的帮助。

Answer 1

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 docs看看

React Native 中如何区分不同的parent 类

How to distinguishes between different parent classes in React Native

wrapper

react-native