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

Question

我有一个运行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>

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

Answer 1

您可以这样做

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

Answer 2

最简单的解决方法是

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

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