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>

另一种方法是拥有一个为其创建相同副本的函数：

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>
    )
}

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

3 个答案: