Reactjs 如何在React Native中动态更改模态的内容

每当用户检查单选按钮时，我需要更新模式内容

     const Furnace = ({}) => {
      return (
          <View>
            <Text>Furnace</Text>
          </View>
        )
       }

 const TestScreen = (props) => {
   let Details = <View />;

   const changeOptions = (value) => {
    switch (value) {
      case 0:
        Details = Furnace;
        return Details;
        break;
      case 1:
        Details = AC;
        return Details;
        break;
    }
   }

 return(
    <View>
      <Button onPress={() => changeOptions(0)} />
      <Modal
        visible={modalVisible}
        onRequestClose={closeModal}>
            <View style={styles.modalView}>
              <Details/>
          </View>
      </Modal>
   </View>
 });

const熔炉=（{}）=>{
返回(
熔炉
)
}
常量测试屏幕=（道具）=>{
让细节=；
常量更改选项=（值）=>{
开关（值）{
案例0：
细节=熔炉；
退货详情；
打破
案例1：
细节=AC；
退货详情；
打破
}
}
返回(
更改选项（0）}/>
});

此方法无效，并返回此错误

错误：元素类型无效：应为字符串（对于内置 组件）或类/函数（用于复合组件），但 得到：目标

---

如果

View

是一个函数，那么

就像

View（）

。因此，当你有：

let Details=；

Details

以下是调用

View（）

的结果。但是在您的

返回中，您再次执行以下操作：



此时，
Details
不再是功能/组件，因此您将收到错误。改为这样做：

const TestScreen=（道具）=>{
让详细信息=查看；//{
开关（值）{
案例0：
细节=熔炉；
退货详情；
打破
案例1：
细节=AC；
退货详情；
打破
}
};
返回(
更改选项（0）}/>
);
};

猜猜你在做什么，几分钟后我想到了以下几点：

function Details({ text }) {
  return (
    <View>
      <Text>{text}</Text>
    </View>
  )
}

export default function TextScreen() {
  let [option, setOption] = React.useState(0);
  let [visible, setVisible] = React.useState(false);

  return (
    <div>
      <View style={styles.container}>
        <Button onPress={() => setVisible(true)} title='Open' />
        <Button onPress={() => setOption(0)} title='Show Furnace'/>
        <Button onPress={() => setOption(1)} title='Show AC'/>
      </View>
      <Modal visible={false} onRequestClose={() => setVisible(false)}>
        {option === 0 && <Details text='furnace' />}
        {option === 1 && <Details text='AC' /> }
      </Modal>
    </div>
  );
}

函数详细信息（{text}）{
返回(
{text}
)
}
导出默认函数TextScreen（）{
let[option，setOption]=React.useState（0）；
let[visible，setVisible]=React.useState（false）；
返回(
setVisible（true）}title='Open'/>
setOption（0）}title='Show firen'/>
setOption（1）}title='Show AC'/>
setVisible（false）}>
{option==0&&}
{option===1&&}
);
}

查看它
什么是
详细信息
以及它是如何导入的？什么是回流炉

？你的开关盒有多个

返回
s。我更新了问题，我知道代码很混乱，但我只想告诉你我需要做什么。错误消失了，但我得到的是空的now@Nima，我不知道
视图
或
详细信息
是什么。如果你不展示，我帮不了你更多。你可以在问题中找到熔炉组件，我需要详细信息=熔炉。我真的不知道这是不是一个正确的方法，但我找不到任何其他方法。@Nima，更新了答案，假设你正在做反应，谢谢，现在更有意义了