javascript - 数据存在或不存在时渲染的最佳方式？

Question

我正在运行一个 graphql 查询，它会加载一些数据。我将该数据传递给一个组件，并传递一个我用来检查数据的函数。如果数据 block 存在则渲染传入的组件，如果不存在则渲染 null。

export const GET_VESSEL = gql`
  query vesselById($id: ID!) {
    vesselById(id: $id) {
      flagCode
      shipName
    }
  }
`;

const checkData = (data, component) => data ? component : null;

<div>
 {checkData(flagCode, <Flag code={`${flagCode}`} height="15" />)}
 {checkData(shipName, <p>${flagCode}</p>)}
</div>

我想知道是否有更简单的方法或者这是否是一个好方法？或者有什么建议。

Answer 1

最简单的解决方案是

{flagCode && <Flag code={flagCode} height="15" />}
{shipName && <p>${flagCode}</p>}

在有限的情况下需要 null，但您的示例不是其中之一。