javascript - 如何在 React 中渲染对象列表

Question

大家好:)我正在尝试渲染 react 中的对象列表，但我无法用黑色文本位置(字幕)替换空白。该复选框也不应该出现在副标题中。

当前工作原理的一个小示例

const dataFake = [
  { label: 'Aspiración', value: false },
  {
    subTitle: 'Fuego de las vías respiratorias'
  },
  {
    label: 'Tubo con manguito',
    value: false
  },
  { label: 'Tubo sin manguito', value: false },
  { label: 'Fi02 > 30%', value: false },
  {
    subTitle: 'No intubar'
  },
  { label: 'Esperado', value: false },
  { label: 'Inesperado', value: false },
  {
    subTitle: 'Manifest'
  }
];

{dataFake.map((item, index) => {
            return (
              <View key={index}>
                <Text style={{ fontStyle: 'italic', fontWeight: 'bold' }}>
                  {item.subTitle}
                </Text>
                <CheckBox
                  onClick={() => {}}
                  isChecked={item.value}
                  rightText={item.label}
                />
              </View>
            );
          })}

我真的很感激任何解决方法，让它发挥作用🙌

Answer 1

使用条件渲染，

{dataFake.map((item, index) => {
            return (
              <View key={index}>
                {
                 item.subTitle !== undefined 
                 ? (
                <Text style={{ fontStyle: 'italic', fontWeight: 'bold' }}>
                  {item.subTitle}
                </Text>
                 )
                 : (
                  <CheckBox
                    onClick={() => {}}
                    isChecked={item.value}
                    rightText={item.label}
                  />
                 )
                }      
              </View>
            );
          })}