Возможно ли передать реквизиты / данные компонентам React, встроенным в "обычный" HTML?

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Мне нужно сделать некоторые обновления на веб-сайте очень старой школы. В настоящее время макет основан на таблице и закодирован вручную. Моей мыслью было использовать React, чтобы избавиться от части повторяющегося кодирования, в частности, перебирать массив данных и создавать строки таблицы с помощью JSX. Я вижу, что здесь можно встроить компоненты React в HTML — https://reactjs.org/docs/add-react-to-a-website.html — но я не уверен, как сделать эти компоненты повторно используемыми, то есть я не уверен, как передать им реквизиты из HTML-файла.

Мой план состоит в том, чтобы считывать массивы данных из файла, специфичного для каждой HTML-страницы

 <script type="text/javascript" src="data_page_x.js"></script>

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

Возможно ли это? Есть ли лучший способ сделать это?

1. если данные уже размещены в html-документе, вы могли бы использовать обычный javascript (или jquery) для запроса элементов с данными, перебора их, создания объектов js и передачи их в качестве реквизитов компонентам react. Это становится проще, особенно потому, что вы сказали, что данные представлены в табличном формате, вы могли бы найти родительский элемент для каждой строки и получить правильные данные от его дочерних элементов. Каждая строка становится объектом js

Ответ №1:

Вы можете использовать что-то вроде:

 const initialData = document.getElementById('initial-data').textContent; 

ReactDOM.render(
  <MyReactElement initialData={JSON.parse(initialData)} />,
  document.getElementById('root')
);

Или, если вы не используете JSX, вы можете передать данные в ReactElement с помощью React.createElement

https://reactjs.org/docs/react-api.html#createelement

https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js

Передача данных с использованием React.createElement

  const domContainer = document.querySelector('#like_button_container'); 
 const e = React.createElement;
 ReactDOM.render(
   e(
    LikeButton,
    {initialData: JSON.parse(initialData)}
  ), domContainer);