我想在多个地方重用我的jsx元素。
const value= <div>some text<Link href="abc.com">text</Link></div>
，我想在多个地方调用值。
我尝试为div添加''，但没有正确获取元素。它作为字符串重播。有人可以向我解释将jsx元素呈现为JavaScript变量的正确语法吗？
zyp0374 回答：如何将jsx元素存储到javascript变量
我想在多个地方重用我的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>,
您可以创建一个无状态组件以重用该组件：
import React from "react"
export const MyComponent = () => (
<div>
some text <Link href="abc.com">text</Link>
</div>
);
我假设您要向链接发送动态内容，因此将href设为ref：）
function MyFunction(){
const Value = ({ href }) => <div>some text<Link href={ href }>text</Link></div>;
return (
<div>
<p> div with value and more </p>
<Value href={"a.com"} />
<Value href={"b.com"} />
<Value href={"c.com"} />
</div>
)
}