如何将JSX元素存储到JavaScript变量中。

Question

我想在多个位置重复使用我的JSX元素。

const value= <div>some text<Link href="abc.com">text</Link></div>

我希望在多个地方调用value。

我尝试为div添加' '，但无法正确获取元素。它返回的是字符串。有人能解释一下将jsx元素渲染到JavaScript变量的正确语法吗？

- devreact

---

尝试将括号 () 包围起来。 - mash

你遇到了什么错误？你在哪里使用了 value？缺少太多信息。 - Vencovsky

旁注：除非您真的在 ./abc.com 上有一个文档，否则该 href 无效。您需要在其前面添加一个方案。 - T.J. Crowder

Answer 1

我想在多个地方重复使用我的jsx元素。

你不能。它只能在一个地方使用。 看起来你可以，我被Mosè Raguzzini纠正了，这样做完全没问题：

const value= <div>some text<Link href="http://example.com">text</Link></div>;

ReactDOM.render(
  <div>
    {value}
    {value}
    {value}
  </div>,
  document.getElementById("root")
);

实时示例：

const value= <div>some text<a href="http://example.com">text</a></div>;

ReactDOM.render(
  <div>
    {value}
    {value}
    {value}
  </div>,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

另一种方法是编写一个函数来创建其完全相同的副本：

const getValue = () => <div>some text<Link href="abc.com">text</Link></div>;

当您需要一个值时，使用getValue()来获取它。

甚至可以将其大写以使其成为功能组件：

const Value = () => <div>some text<Link href="abc.com">text</Link></div>;

现场示例（两者都）：

const getValue = () => <div>some text<a href="http://example.com">text</a></div>;

const Value = () => <div>some text<a href="http://example.com">text</a></div>;

ReactDOM.render(
  <div>
    {getValue()}
    {getValue()}
    <Value />
    <Value />
  </div>,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

---

如何将JSX元素存储到JavaScript变量中

您不能像您展示的那样重复使用React元素，但以下做法没有问题：

const value= <div>some text<Link href="abc.com">text</Link></div>

除了在末尾依赖ASI（自动分号插入）之外，因为没有;。这样做完全没问题。但它并不具备可重用性。

以下是一个示例：

const value= <div>some text<a href="http://example.com">text</a></div>;

ReactDOM.render(
  <div>
    {value}
  </div>,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

- T.J. Crowder

---

当然可以重复使用变量本身：https://jsfiddle.net/qvhu38fc/ - Mosè Raguzzini

@MosèRaguzzini - 哇。谢谢。这非常令人惊讶。你确定它被正确支持了吗？ - T.J. Crowder

是的，我非常确定。 - Hevar

@MosèRaguzzini - 再次感谢您。哇，这与DOM的工作方式有很大的区别。（我知道，我知道，不要将DOM概念推广到React中...）顺便说一下，我已经修复了它。 - T.J. Crowder

@MosèRaguzzini - 我现在明白了。createElement只是存储有关如何创建元素的信息。它实际上是在使用时创建的。今天我学到了一些关于React的基本知识，再次感谢。 - T.J. Crowder

Answer 2

您可以创建一个无状态组件来重用该组件：

  import React from "react"

  export const MyComponent = () => (
    <div>
      some text <Link href="abc.com">text</Link>
    </div>
  );

- Hevar