使用 Hooks 在交互式 React 代码中动态渲染 Markdown 内容（不同数量/顺序的 Hooks 问题！）

Question

你好！

我想创建一个移动应用程序，它呈现用 markdown 编写的内容，类似于 Obsidian。到目前为止，我成功地使用库

react-native-render-display

渲染具有非交互式内容的 Markdown 页面，例如文字、图像等等。现在我想添加具有自定义规则的交互式降价内容，例如地图视图，需要钩子才能正常工作。因为页面可以通过用户输入进行更改，并且每个页面都有不同的（交互式）内容，所以我遇到了 “渲染的钩子比之前渲染期间更多”的问题。

解决这个问题的最佳策略是什么？

在玩耍时，我发现如果我创建两个反应组件

Markdown

和

Markdown1

，它们基本上是相同的组件，只是名称不同。我可以为每个组件提供不同的降价内容，并有条件地渲染其中之一，而不会出现错误。这是解决这个问题的好方法吗？如果是的话，反应如何区分反应成分？如何为不同的交互内容动态创建 

Markdown

 组件，从而做出不同的反应？

在

react-navigation

 中为每个 Markdown 页面动态创建一个屏幕是一个很好的解决方案吗？

Answer 1

我也陷入了同样的问题，但我通过拆分组件解决了

当错误发生时，代码如下：

import React, { useState } from 'react'
import { ScrollView, StyleSheet, Text, TouchableOpacity, View, 
useWindowDimensions } from 'react-native';
import InsureIcon from './InsureIcon';
import { icons } from '../constants';
import InputText from './common/InputText';
import { ButtonLoad } from './common/ButtonLoad';

const InsureDetails = ({handleChange,proposerDetail}) => {
const [addMoreMembers,setAddMoreMembers]=useState(false)
const handleAddMember=()=>{
setAddMoreMembers(true)
  }
return (
  <ScrollView>
    <Text style={{fontSize:35,fontFamily:'serif',fontWeight:'bold', 
  marginVertical:30,color:'#696ac3'}}>
      Select members to insure
    </Text>
    <View style={styles.insurers}>
      <InsureIcon icon={icons.person} type="self" />
      <InsureIcon icon={icons.female} type="spouse" />
      <InsureIcon icon={icons.son} type="son" />
      <InsureIcon icon={icons.daughter} type="daughter" />
      <InsureIcon icon={icons.father} type="father" />
      <InsureIcon icon={icons.mother} type="mother" />
      {addMoreMembers &&
      <>
      <InsureIcon icon={icons.father} type="grand-father" />
      <InsureIcon icon={icons.mother} type="grand-mother" />
      </>
      }

      {!addMoreMembers &&
      <View style={{width:useWindowDimensions().width*.8,marginHorizontal:useWindowDimensions().width*.1}}>
        <ButtonLoad onPress={()=>handleAddMember()} title='Add more members'/>
      </View>}

    </View>
    <InputText
      label="Age of Eldest Member"
      icon={icons.calender}
      id='age'
      type={'numeric'}
      onChangeText={({ value }) => handleChange(value, id='age')}
      value={proposerDetail.age}

      />
  </ScrollView>
 );
 };

export default InsureDetails

像这样拆分组件后不会出现错误

import React, { useState } from 'react'
import { ScrollView, StyleSheet, Text, TouchableOpacity, View, 
useWindowDimensions } from 'react-native';
import InsureIcon from './InsureIcon';
import { icons } from '../constants';
import InputText from './common/InputText';
import { ButtonLoad } from './common/ButtonLoad';

const MoreMember=()=>{
return (
<>
<InsureIcon icon={icons.father} type="grand-father" />
<InsureIcon icon={icons.father} type="grand-father" />
</>
)
}

const AddMember=({handleAddMember})=>{
return <View style= 
{{width:useWindowDimensions().width*.8, 
marginHorizontal:useWindowDimensions().width*.1}}>
<ButtonLoad onPress={handleAddMember} title='Add more members'/>
</View>
}

const InsureDetails = ({handleChange,proposerDetail}) => {
const [addMoreMembers,setAddMoreMembers]=useState(false)
const handleAddMember=()=>{
setAddMoreMembers(true)
}
return (
  <ScrollView>
    <Text style={{ fontSize:35,fontFamily:'serif',fontWeight:'bold', 
marginVertical:30,color:'#696ac3'}}>
      Select members to insure
    </Text>
    <View style={styles.insurers}>
      <InsureIcon icon={icons.person} type="self" />
      <InsureIcon icon={icons.female} type="spouse" />
      <InsureIcon icon={icons.son} type="son" />
      <InsureIcon icon={icons.daughter} type="daughter" />
      <InsureIcon icon={icons.father} type="father" />
      <InsureIcon icon={icons.mother} type="mother" />
     {addMoreMembers&& <MoreMember/>}

      {!addMoreMembers && <AddMember handleAddMember={handleAddMember}/>
      }

    </View>
    <InputText
      label="Age of Eldest Member"
      icon={icons.calender}
      id='age'
      type={'numeric'}
      onChangeText={({ value }) => handleChange(value, id='age')}
      value={proposerDetail.age}

      />
  </ScrollView>
  );
 };

 export default InsureDetails