Как несколько раз заменить части строки компонентом реагирования?

Question

Как я могу заменить части строки снова другим компонентом реакции? Вот теоретический пример, который, конечно, не работает ... Но он говорит само за себя

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = `<div>${temp1.join(' ')}</div>`;

console.log(text1)

Результат: <div><b>hello</b> <i>world</i></div>

Answer 1

Давайте начнем без React и попытаемся разбить то, что вы делаете (я буду использовать строки вместо jsx):

let text = "hello world";
let reg, parts;

reg = new RegExp(/hello/);
parts = text.split(reg);
temp1 = parts.map(part => part.match(reg) ? `<b>${part}</b>` : part)
text1 = `<div>${temp1}</div>`;

reg = new RegExp(/world/);
parts = text.split(reg);
temp2 = parts.map(part => part.match(reg) ? `<i>${part}</i>` : part)
text2 = `<div>${temp2}</div>`;

console.log(text1)
console.log(text2)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Вывод:

<div>, world</div>
<div>hello ,</div>

Это то, что вы хотите? Я предполагаю, что нет.

Кстати, просто, чтобы вы знали, когда вы создаете массив деталей parts = text.split(reg);

, вы получаете, во-первых, массив, подобный ["", " world"], а во-вторых, как: ["hello ", ""]

Я не думаю, что это то, что вы ожидаете, или, по крайней мере, это не помогает получить результат, который, я думаю, вы хотите?

Давайте предположим, что вы действительно хотите это как результат? - давайте назовем это «А»:

<div><b>hello</b> <i>world</i></div>

Или, может быть, вы хотите этого? (не очень ясно из вашего вопроса) - давайте назовем это «B»:

<div><b>hello</b></div>
<div><i>world</i></div>

, поэтому давайте попробуем достичь A:

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = `<div>${temp1.join(' ')}</div>`;

console.log(text1)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Выход (A):

<div><b>hello</b> <i>world</i></div>

Теперь давайте попробуем B:

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = temp1.map(part => {
  return `<div>${part}</div>`
})

console.log(text1.join('\n'))

.as-console-wrapper { max-height: 100% !important; top: 0; }

Выход (B):

<div><b>hello</b></div>
<div><i>world</i></div>

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

Обновите, после того, как вопрос был отредактирован, теперь ясно, что является желаемым выводом, поэтому я сейчас включу его в реакцию:

Кажется, он не работает при переполнении стека фрагмент,

Но он работает в codePen: https://codepen.io/Alexander9111/pen/VwLGzpJ

Вывод:

function Example() {
  const text = "hello world";
  const modText = text.replace(/ /g, ", ");
  const parts = modText.split(",");

  return (
    <>
      {parts.map(part => {
        return part.match(/hello/) ? (
          <b>{part}</b>
        ) : part.match(/world/) ? (
          <i>{part}</i>
        ) : (
          part
        );
      })}
    </>
  );
}

ReactDOM.render(<Example />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">