javascript - 如何将jsx元素存储到javascript变量

Question

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

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

我想在多个地方调用值(value)。

我尝试为 div 添加“”，但没有正确获取元素。它作为字符串返回。有人可以向我解释将 jsx 元素呈现为 JavaScript 变量的正确语法吗？

Answer 1

I want to reuse my jsx element in multiple places.

你不能。只能用于 一个地方。看来你可以，我接受 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>

how to store jsx element to javascript variable

您不能按照您显示的方式重用 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>