Есть ли способ передать данные в компонент React с HTML-страницы?

У меня есть приложение React, подобное этому.

var X = React.createClass({
  componentDidMount: function() {
    fetch(this.props.feed).then(...);
  }
  render: function() {
    return <div>{this.props.feed}</div>
  }
});

Поддержка подачи используется для получения канала JSON в компонентеDidMount, который уникален для конкретного клиента.

Было бы удобно передать данные в мое приложение React из HTML для его параметризации:

<html>
  <body>
    <div id="app" feed='custom_feed.json'></div>
  </body>
</html

Мое текущее решение выглядит так:

var root = document.getElementById('app');
var feed = root.getAttribute('feed')
ReactDOM.render(<X feed={feed}/>, root);

Это, очевидно, работает, но похоже, что должно быть более идиоматическое решение. Есть ли еще способ React для этого?

Ответ 1

Я использовал data- для различных реквизитов, затем передал все реквизиты, используя деструктурирование {...dataset}, например:

HTML:

<div id="app" data-feed='custom_feed.json' data-someprop='value'></div>

JS:

var root = document.getElementById('app');
ReactDOM.render(<X {...(root.dataset)} />, root);

~~Изменение: демо-скрипка~~
Редактировать 2018: обновленная скрипка

Ответ 2

У меня была аналогичная проблема, динамически сгенерированные страницы, содержащие данные, относящиеся к материалам React.

Я только что объявил их в глобальной области.

<script>
  window.foobles = [12,453,12];
  window.bahs = ["bah", "bah", "black sheep"];
</script>

.. THEN..

ReactDOM.render(
  <Component
    foobles={window.foobles}
    bahs={window.bah}
  />,
  document.getElementById('app')
)

Очевидно, что с точки зрения имен это может иметь некоторые недостатки:)

Ответ 3

Вы можете просто передавать свои данные при установке компонента следующим образом:

<div id="root"></div>
<script>
    const data = { foo: 'bar' };
    ReactDOM.render(
        React.createElement(MyComponent, data),
        document.getElementById('root')
    );
</script>

Ответ 4

React Habitat - это среда, которая облегчает это, если вы хотите что-то многоразовое и расширяемое.

Вы регистрируете компоненты React как это

containerBuilder.register(Feed).as('Feed')

Затем определите цели в HTML, например, с помощью реквизитов

<div data-component="Feed" data-prop-feed-src="/custom_feed.json">

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

Раскрытие информации: Я являюсь одним из главных разработчиков этой структуры.