javascript - 呈现数据是否存在的最佳方式？

我有一个graphql查询正在运行，它会加载一些数据。我正在将该数据传递给组件，还传递了我为检查数据而创建的功能。如果数据存在，则渲染传入的组件，如果不存在，则渲染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>

我想知道是否有更简单的方法，或者这是否是个好方法？或任何建议。

最佳答案

最简单的解决方案是

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

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