React - 如何有条件地显示获取的数据

Question

如果我的文档文件夹中没有文档，我想显示“目前没有文档”，但是当我这样做时，我会收到一条警告消息

warn The GraphQL query in the non-page component
"/Users/abe/Projects/abechoi/gatsby1.0/abechoi/src/templates/doc-template.js"
 will not be run.

有没有更好的方法来实现这一点，还是我应该忽略这个警告？

export default function Docs({ data }) {
  const docs = data.allMarkdownRemark.nodes

  return (
    <Layout>
      <div className={styles.docsContainer}>
        <h2>Docs</h2>
        <h3>My Technical Documentations</h3>
        {docs.length === 0 ? (
          <p>There are no docs at the moment</p>
        ) : (
          <div className={styles.docs}>
            {docs.map(doc => (
              <Link to={"/docs/" + doc.frontmatter.slug} key={doc.id}>
                <div>
                  <h3>{doc.frontmatter.title}</h3>
                </div>
              </Link>
            ))}
          </div>
        )}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query DocsPage {
    allMarkdownRemark(
      sort: { fields: frontmatter___date, order: DESC }
      filter: { frontmatter: { type: { eq: "doc" } } }
    ) {
      nodes {
        frontmatter {
          title
          slug
        }
        id
      }
    }
  }
`

Answer 1

我会使用一个子组件来完成所有检查，然后渲染好的组件。

  function CompletedButtons() {
    if (buttonStatus === "pause" || buttonStatus === "start") {
      return <StartButton />;
    } else if (buttonStatus === "inProgress") {
      return <Pause />;
    }
    return <ResetButton />;
  }

在 JSX 中它看起来像这样。

        <div className='buttonContainer'>
          <CompletedButtons />
        </div>