Преобразовать строку в строку JSX в реагировать | Как преобразовать escape-последовательности Unicode в символы Unicode в реакции

Question

<Hello name={'\u4ed8\u52a0\u4fa1\u5024\u7a0e# IE9834481A'}></Hello>

class Hello extends Component {
    render() {
        return (
            <div>
                {this.props.name}
            </div>
        );
    }
}

Вышеуказанные 2 фрагмента кода работают нормально и дают результат, как и ожидалось, т. Е. Escape-последовательности преобразуются в соответствующие символы Юникода.

Теперь рассмотрим, что есть массив (динамически заполняемый) и значения массива будут значением по умолчанию для входного тега, и этот массив содержит escape-последовательности Юникода.

Пример: <input value={array[i]}></input>

Я пытался сделать <input value={<Hello name={array[i]}></Hello>}></input>

Но o / p - это [объектный объект].

Если я жестко закодирую строку во входном теге, то o / p, как и ожидалось, <input value={<Hello name={'\u4ed8\u52a0\u4fa1\u5024\u7a0e'}></Hello>}></input>

Как следует Чтобы решить эту проблему, я хочу предварительно заполнить входной тег значением массива, содержащим escape-последовательности Юникода (после преобразования в символы Юникода).

Answer 1

Нельзя передавать узел реагирования во входное значение. Вот ожидаемая строка. Если вам нужна Hi, используйте функцию.

const hello = (name) => `Hi ${name}`;


ReactDOM.render(
  <input value={hello('\u4ed8\u52a0\u4fa1\u5024\u7a0e')}></input>,
  document.getElementById('root')
);

Answer 2

console.log(JSON.parse('"\u4ed8\u52a0\u4fa1\u5024\u7a0e# IE9834481A"'));