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

Question

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

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

我想在多个地方调用价值。

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

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>

另一种方法是使用 function 创建相同的副本：

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>

Answer 2

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

  import React from "react"

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

Answer 3

我假设您想将动态内容发送到链接，因此将 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>
    )
}