Попытка отобразить ссылку внутри строки в JSX - PullRequest
Новая
       69

Попытка отобразить ссылку внутри строки в JSX

0 голосов
/ 04 августа 2020

Я пытаюсь отобразить ссылку, которая находится в массиве объектов со свойствами и значениями. 

const arr = [
  {
    id: 1,
    title: "This is a title",
    body: [
      "This is some stuff. Lorem ipsum, lorizzle for shizzle.",
      "Click here to send an <Link to="mailto:yo@mail.com">email</Link>"
    ]
  },
  {
    id: 2,
    title: "This is another title",
    body: [
      "Moar stuff.",
      "Here is ma' <Link to="mailto:hello@mail.com">email</Link>"
    ]
  }
]

Я использую этот logi c для сопоставления объектов массива и хранить их внутри массива компонентов. Это работает как задумано, если все, что я собираюсь сделать, это просто отобразить текст в абзаце. Когда дело касается ссылок, это просто не сработает. Я предполагаю, что React принимает строку за текст и отображает все как текст. Он не заботится о содержимом. 

            <section key={item.key} className="">
                <h2 className="text-base">{item.title}</h2>
                {
                    item.body.map(function(paragraph) {
                        return(
                            <p className="text-sm">{paragraph}</p>
                        )
                    })
                }
            </section>

Я попытался заключить теги Link в фигурные скобки, чтобы объединить строку и адрес электронной почты (как это было бы в HTML), шаблон строки литералы. Ничего не сработало.

Я не уверен, что есть зависимость, которую я пропустил, или шаг. Возможно, мой подход неверен? Может быть, то, что я пытаюсь сделать, невозможно в React?

Буду признателен за пролить свет на этот вопрос.

Ответы [ 3 ]

1 голос
/ 04 августа 2020

Некоторые исправления в вашем вопросе, что я нашел

Предполагая, что вы хотите иметь тег привязки

, чтобы настроить свой массив, вместо этого измените

  1. <a href='mailto:yo@mail.com'>email</a> of <Link to="mailto:yo@mail.com">email</Link>
  2. "Click here to send an <Link to="mailto:yo@mail.com">email</Link>" вместо "Click here to send an <a href='mailto:yo@mail.com'>email</a>", кавычки должны использоваться правильно внутри двойных кавычек, вам нужно иметь одинарные кавычки, или наоборот

Выполнение вышеуказанных изменений, добавление решение

Здесь можно использовать несколько подходов

  1. Использование библиотеки

Пример html -react-parser

Фрагмент кода

Приложение js

import React, { Fragment } from "react";
import Parser from "html-react-parser";

const arr = [
  {
    id: 1,
    title: "This is a title",
    body: [
      "This is some stuff. Lorem ipsum, lorizzle for shizzle.",
      "Click here to send an <a href='mailto:yo@mail.com'>email</a>"
    ]
  },
  {
    id: 2,
    title: "This is another title",
    body: [
      "Moar stuff.",
      "Here is ma' <a href='mailto:hello@mail.com'>email</a>"
    ]
  }
];
export default function App() {
  return (
    <Fragment>
      {arr.map(item => (
        <section key={item.key} className="">
          <h2 className="text-base">{item.title}</h2>
          {item.body.map(function(paragraph) {
            return <p className="text-sm">{Parser(paragraph)}</p>;
          })}
        </section>
      ))}
    </Fragment>
  );
}
Используйте опасноSetInner Html, но этот метод имеет некоторую fl aws, как указано в документации

опасноSetInner HTML является заменой React для используя внутренний HTML в DOM браузера. В общем, установка HTML из кода является рискованной, потому что легко случайно подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS).

Фрагмент кода

App. js

import React, { Fragment } from "react";

const arr = [
  {
    id: 1,
    title: "This is a title",
    body: [
      "This is some stuff. Lorem ipsum, lorizzle for shizzle.",
      "Click here to send an <a href='mailto:yo@mail.com'>email</a>"
    ]
  },
  {
    id: 2,
    title: "This is another title",
    body: [
      "Moar stuff.",
      "Here is ma' <a href='mailto:hello@mail.com'>email</a>"
    ]
  }
];
export default function App() {
  return (
    <Fragment>
      {arr.map(item => (
        <section key={item.key} className="">
          <h2 className="text-base">{item.title}</h2>
          {item.body.map(function(paragraph) {
            return (
              <p
                className="text-sm"
                dangerouslySetInnerHTML={{ __html: paragraph }}
              />
            );
          })}
        </section>
      ))}
    </Fragment>
  );
}

В описанном выше подходе вы можете выполнить dompurify и установить с помощью dangeroussetinner html, чтобы избежать атак XSS 

import DOMPurify from "dompurify";

<p
  className="text-sm"
  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(paragraph) }}
/>;

Надеюсь, это поможет лучше понять ?

0 голосов
/ 04 августа 2020

Это был бы очень наивный подход к передаче jsx внутри массива. 

const arr = [
  {
    id: 1,
    title: "This is a title",
    body: [
      ["This is some stuff. Lorem ipsum, lorizzle for shizzle."],
      ["Click here to send an ", <Link to="mailto:yo@mail.com">email</Link>"]
    ]
  },

item.body.map(function(paragraph) {
    const content = paragraph.reduce((combined, elem) => {
        return content + elem;
    });

    return(
        <p className="text-sm">{paragraph}</p>
    )
});
0 голосов
/ 04 августа 2020

, вы можете попробовать использовать dangerouslySetInnerHtml.

Примерно так: <div dangerouslySetInnerHtml={paragraph} />

Этот атрибут назван так по какой-то причине, поэтому будьте осторожны с тем, что вы отправляете туда, так как это может привести к XSS-инъекциям.

Подробнее об этом здесь: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

...