Reactjs 重构react代码以检查状态null条件

下面是我的示例代码，出于可读性的原因，我计划进行重构，基本上我需要检查state.room是否有内容，然后返回文本，然后返回字段的内容

return (
  { state.room ? 
    <Text>{state.room.name}</Text>
    : null }
  { state.room ? 
    <Text>{state.room.address}</Text>
    : null }
);

返回(
{州议会室？
{state.room.name}
：null}
{州议会室？
{state.room.address}
：null}
);

在返回语句之前，您只需检查

state.room

是否真实，然后再尝试触摸它一次，然后假设它正常

if (!state.room) {
    return null;
}

return (
    <React.Fragment>
        <Text>{state.room}</Text>
        <Text>{state.room.address}</Text>
    </React.Fragment>
)

if（！state.room）{
返回null；
}
返回(
{state.room}
{state.room.address}
)

您可以使用

{state.room&&{state.room.name}

代替。

您只需选中write as即可

return state.room && (
    <>
        <Text>{state.room.name}</Text>
        <Text>{state.room.address}</Text>
    </>
)

返回state.room&&(
{state.room.name}
{state.room.address}
)

如果不支持片段速记，则可以编写为

React.fragment

而不是

---

如果

state.room

不是falsy，它将仅返回渲染标记。

谢谢您的回答，但我有其他代码，无法直接返回，因此请帮助我更好地理解您的问题。