Отображение стилизованного текста в предварительном компоненте в стиле react

#javascript #reactjs

Вопрос:

Я пытаюсь выделить некоторый текст в React pre. Но, похоже, это не работает. Он отображается [object Object] вместо текста.

 const Text = styled.pre `
    color: black;
    padding-bottom: 10px;
`;

const HighLight = styled.span `
    color: red;
`;



let obj = [{
  id: 123,
  name: 'abcd',
}, {
  id: 234,
  name: 'new name',
}];

let str = "[123] Hello how are you? [234] and you? [123] Please call me.";

obj.forEach(o => {
      str = str.replace(new RegExp('\['   o.id   '\]', 'gi'), <HighLight>{o.name}</HighLight>);
      });

    console.log(str);


    render() {
      return ( <Text> {str}</Text>);
      }

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

Также я попробовал следовать, но результат тот же

 const Text = styled.span `
        color: black;
        padding-bottom: 10px;
    `;

<Text dangerouslySetInnerHTML={{ __html: str }} />

Любая помощь будет принята с благодарностью.

1. Вы не можете вставить элемент React в строку. Элемент React — это объект. Вам нужно было бы сделать это наоборот: преобразовать строку в элементы React.

2. @FelixKling Можете ли вы предложить какой-либо другой способ, которым я могу получить результат, который я хочу?

3. @FelixKling Проверьте мой отредактированный вопрос. Это тоже не работает. Тот же результат

Ответ №1:

Как я уже упоминал в своем комментарии, вы не можете вставлять элементы React в строку, потому что элементы React являются объектами. Вместо этого вам нужно каким-то образом проанализировать строку и вместо этого создать список элементов React.

В вашем конкретном примере вам может сойти с рук использование регулярного выражения для разделения строки и сопоставления каждой части либо с самим собой (обычная строка), либо с элементом React, если он соответствует шаблону. Мы используем тот факт, что JavaScript включает разделитель в результирующий массив, если мы используем

 function HighLight({children}) {
  return <strong>{children}</strong>;
}

let obj = [{
  id: 123,
  name: 'abcd',
}, {
  id: 234,
  name: 'new name',
}];

const elements = "[123] Hello how are you? [234] and you? [123] Please call me.".split(/([d ])/).map(match => {
   if (/[d ]/.test(match)) {
     return (
       <HighLight>
         {obj.find(o => o.id === Number(match.slice(1,-1))).name}
       </HighLight>
     );
   }
   return match;
});

ReactDOM.render(
  elements,
  document.body
);

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

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

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

1. Спасибо, все работает хорошо. Но есть одна небольшая проблема. если идентификатор похож на: ‘0f50811a-1fe3’, то он не находит эту строку. Я хорошо разбираюсь в регулярных выражениях, не могли бы вы помочь мне в этом?

2. /([[^]] ])/ находит каждую последовательность символов, начинающуюся с [ и заканчивающуюся ] .