html - 在 html 标签中插入 React 变量作为属性

Question

我正在尝试获取以下行

<a href="/users/users/authentication" rel='nofollow'>

注意 rel='nofollow'

在我的 React 组件的渲染方法中，我有这个 JSX 语法:

render() {
  const rel = "rel='nofollow'";
  return (
    <div>
      <a href="/users/users/authentication" {rel}>
    </div>
  );
}

我得到一个:错误:/~/Scripts/Navigation.jsx:意外标记，应为“...”

我也试过

let rel = { __html: "<b>Hey</b>" };

和

<a href="/users/users/authentication" dangerouslySetInnerHTML={rel}>

这也失败了，但无论如何危险的是，SetInnerHTML 应该在开始和结束标记之间而不是内中注入(inject)一些东西作为标记的属性。

实现这一目标的正确 JSX 语法是什么？

Answer 1

您首先必须决定您的 rel 值应该是什么“形状”。会是文字吗？还是一个对象？

1 rel 是一个文本。

如果 rel 作为原始文本传递，例如 nofollow，您必须手动分配 rel 属性。

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    <a href="https://www.google.com" rel={rel}>
      Google
    </a>
  );
}

2 rel 是一个对象。

如果 rel 作为对象传递，例如 {rel: 'nofollow'}，那么您可以简单地将对象传递给 anchor 元素。

function LinkWithObjectSpread() {
  const rel = { rel: "nofollow" };

  return (
    <a href="https://www.bing.com" {...rel}>
      Bing
    </a>
  );
}

可以看到两者都会添加rel='nofollow'属性。

演示

您可以在 CodeSandbox 上跟进。