如何在反应中处理元标记？答案

【问题标题】：How to handle meta tags in react?如何在反应中处理元标记？
【发布时间】：2019-10-29 18:05:07
【问题描述】：

我正在尝试弄清楚如何以可以访问的方式将元标记添加到我的网页。

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

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 是一个异步操作，在它完成加载之前我没有元标记。

对此有什么想法吗？我在想是否有办法延迟发出任何 html 的反应，直到某些操作完成，我可以侥幸逃脱。

【问题讨论】：

标签： reactjs react-apollo

【解决方案1】：

我猜你可以使用react-helmet 来实现：https://github.com/nfl/react-helmet

【讨论】：

我的问题是元标记依赖于异步操作的完成
您可以使用默认值预填充元标记，并将这些值替换为您从异步操作中获得的具有该库的值。
没关系，到时候搜索引擎已经把页面编入索引了。