как сохранить элемент jsx в переменную javascript

Question

Я хочу повторно использовать свой элемент jsx в нескольких местах.

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

и я хочу назвать значение в нескольких местах.

Я пытался добавить '' для div, но неправильно получал элемент. Это отступает как строка. Может кто-нибудь объяснить мне правильный синтаксис для рендеринга элемента jsx в переменную JavaScript?

Answer 1

Вы можете создать компонент без сохранения состояния для повторного использования указанного компонента:

  import React from "react"

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

Answer 2

Я хочу повторно использовать свой элемент 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")
);

Live Пример:

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>;

Пример Live (из обоих):

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