当有条件地渲染两个组件时，每个组件都包含一个 react-native-elements <Input>，激活一个会导致组件异常/不渲染

Posted 2023-02-22

【中文标题】当有条件地渲染两个组件时，每个组件都包含一个 react-native-elements <Input>，激活一个会导致组件异常/不渲染

【英文标题】：When conditionally rendering two components that each contain an react-native-elements <Input>, activating one causes a component exception/non-render

【发布时间】：2021-08-16 07:21:25

【问题描述】：

这是父组件。我有条件地渲染并基于改变 signInActive 状态 true/false 的 onPress。

     <View>
    signInActive ? (
      <View>
        <SignIn />
      </View>
    ) : (
      <View>
        <Registration />
      </View>
    )
  </View>

这是为上述真实情况呈现的工作组件：登录组件

 <View style=styles.inputContainer>
    <Input
      autofocus
      placeholder="Email"
      // value=email
      // onChangeText=(e) => setEmail(e.target.value)
    />
    <Input
      style=styles.bottomInput
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

这是假条件情况注册组件中的非渲染组件...完全一样。

<View style=styles.inputContainer>
    <Input
      autofocus
      placeholder="Email"
      // value=email
      // onChangeText=(e) => setEmail(e.target.value)
    />
    <Input
      style=styles.bottomInput
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

错误： Component Exception: Element type is invalid: expected a string (for built-in component) or a class/function but got: undefined. You likely forgot to export your component from the file it's define in.

父组件渲染

【参考方案1】：

解决方案：从 react-native-elements 导入的 Input 在 import 语句中没有正确解构。导入而不是 导入