在 React Native 中向组件添加子组件

Question

在我的代码中的某处，我使用 .map 函数创建一个组件数组，并使用这些组件更新状态。 ListItems 然后在 return() 函数中呈现。

我的问题是以后如何将子组件添加到组件中？就像在下面的代码中一样，“徽章”组件最初需要在那里，但后来添加以显示该用户有一条新的未读消息。如何做到这一点？

  var chatsWithUsersInfo = userInfo.map((message, index) => (
    <ListItem key={index} onPress={() => navigation.navigate('GiftedChat', { otherPersonUserId: message.userId }) }>
     <Avatar rounded source={{ uri: message.profilePictureURI }} />


     <Badge
     status="success"
     containerStyle={{ position: 'absolute', top: -4, right: -4 }}
     />

     <ListItem.Content>
       <ListItem.Title>{message.name}</ListItem.Title>
     </ListItem.Content>
   </ListItem>
  ))
  setChats(chatsWithUsersInfo)

以后如何向这个 ListItem 组件数组添加子组件？

Answer 1

React 有一些关于条件渲染的优秀文档https://reactjs.org/docs/conditional-rendering.html。

{ message?.unread
  ? <Badge />
  : null
}

PS，通过将 React 组件列表放入 state 中，您将很难管理它。

您的组件列表chatsWithUsersInfo 是从userInfo 派生的，因此请在渲染函数（或功能组件的函数体/返回）中计算它。让 React 处理反应性。

const Chats = (props) => {
  return <Container>
    {userInfo.map(...)}
  <Container />;
}

参考：https://web.archive.org/web/20150419023006/http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-shouldnt-go-in-state

编辑：更新您的问题。

考虑这两个等效组件

const Comp = ({}) => {
  const [count, setCount] = useState(0);

  // Markup is derived from state :+1:
  return <Button onPress={() => setCount(count + 1)}>
    {count && <Label>{count}</Label>}
  </Button>;
};

const Comp = ({}) => {
  const [count, setCount] = useState(0);

  // Let's set the Label component on state
  const [Label, setLabel] = useState(null);

  // Now we need to add a redundant render every
  // time count updates so we can update the Label
  // component and render again!
  useEffect(() => {
    if (count) setLabel(<Label>{count}<Label/>);
  }, [count]);

  return <Button onPress={() => setCount(count + 1)}>
    {Label}
  </Button>;
};