如何在react中处理元标签？

Question

我正在试图弄清楚如何在我的网页上添加元标签，以使其能够被访问。

我的问题是meta标签依赖于异步操作的完成：

import * as React from 'react'
import { Dialog } from '@material-ui/core';
import { withRouter, RouteComponentProps } from 'react-router';
import gql from 'graphql-tag';
import { useQuery } from 'react-apollo-hooks';
import { SubmissionFocus } from './SubmissionFocus';
import MetaTags from 'react-meta-tags';
import { Submission } from '../../AppContext';

const SUBMISSION = gql`query submission($id: String!) {
    submission(id: $id) {
      url
      id
      title
      comments {
        id
        comment
        replyingCommentId
        username
      }
      tags
      embedVideo {
        type
        url
        width
        height
      }
      preview {
        url
        type
        width
        height
      }
    }
  }
`
const BaseRoutedSubmissionFocus = (props: RouteComponentProps) => {
  const path = props.location.pathname;
  const p = path.split('/').filter((s) => s !== "")
  let submissionId = p[0] == 's' && p[1]
  **const submission = useQuery(SUBMISSION, {
    variables: {
      id: submissionId
    },
    skip: submissionId === false
  })**

  const dismiss = () => {
    props.history.push("/");
  }

  if (p[0] !== 's')
    return <></>

  const sub: Submission | undefined = submission.data!.submission
  return <>
    {sub && <MetaTags>
      <title>Page 1</title>
      <meta name="description" content="Some description." />
      <meta property="og:title" content={sub.title} />
      <meta property="og:image" content={sub.preview.url} />
    </MetaTags>}

    < Dialog onClose={dismiss} open={!!submissionId
    }
      maxWidth="lg"
      fullWidth={true} >
      <div style={{ height: '90vh' }}>
        {!submission.loading && submission.data && <SubmissionFocus allowExpand={false} submission={sub} />}
      </div>
    </Dialog >
  </>
}

export const RoutedSubmissionFocus = withRouter(BaseRoutedSubmissionFocus);

useQuery是一个异步操作，在它完成加载之前，我没有元标签。

对此有什么想法吗？我在想，如果有一种方法可以延迟react发出任何html，直到某些操作完成，我就可以逃脱惩罚。

Answer 1

我想您可以使用react-helmet来实现这一点：https://github.com/nfl/react-helmet