Вопрос по reactjs – Передать реквизиты из шаблона в корневой узелact.js

9

Возможно, я что-то пропустил, но здесь идет. Если у меня есть:

var Swoosh = React.createClass({
  render: function() {
    return (
      <div className="swoosh">
        Boom.
      </div>
    );
  }
});

React.renderComponent(
  <Swoosh />,
  document.getElementById('content')
);

Могу ли я установитьprops в качестве атрибутов в точке монтирования (гдеid='content')?

<div id='content' foo='alice' bar='has' bav='a cat' />
<!-- have foo, bar & bav available as props in <Swoosh />? -->

Ваш Ответ

3   ответа
18

Нет, хотя, конечно, вы можете сделать:

var container = document.getElementById('content');
React.renderComponent(
  <Swoosh
    foo={container.getAttribute('foo')}
    bar={container.getAttribute('bar')}
    bav={container.getAttribute('bav')} />,
  container
);

(или если вы хотите, чтобы атрибуты диктовали, используя что-то вродеhttps://stackoverflow.com/a/5282801/49485тогда вы можете сделатьSwoosh(attributes)).

Я написал Mixin в качестве упражнения. Это работает, но я думаю, что ответ Бена - лучший совет в долгосрочной перспективе. Mixin соединяет вас из DOM в React, но вам будет легче, если вы все время будете использовать React. Ross Allen
Я принял другой ответ, но я чувствую, что этот должен получить столько же повторений. Спасибо! maligree
Вопрос выглядел как тестовый пример, для которого это решение было бы лучше. Однако это не очень хороший ответ, так как он требует от вас заранее знать, что понадобится каждому компоненту. Что если вы хотите абстрагировать это от служебной функции? Вы не можете предсказать, какими будут атрибуты, и это побуждает создавать множество шаблонов только для передачи произвольных атрибутов. pho3nixf1re
7

В API нет ничего для передачи свойств из простого элемента DOM в компонент React, но вы можете создать Mixin для этого. Обратите внимание, что это будет работать только для компонента, переданного вrenderComponent потому что он используетsetProps:

(Рабочая JSFiddle)

var InheritsDomAttributes = {
  componentDidMount: function(rootNode) {
    var hasNextProps = false;
    var nextProps = {};
    var parentNode = rootNode.parentNode;

    Object.keys(parentNode.attributes).forEach(function(key) {
      var namedNode;

      // NamedNodeMaps have an attribute named "length" that
      // should not be considered a set attribute.
      if (key !== "length") {
        hasNextProps = true;
        namedNode = parentNode.attributes[key];
        nextProps[namedNode.name] = namedNode.value;
      }
    });

    if (hasNextProps) this.setProps(nextProps);
  }
};

var Swoosh = React.createClass({
  mixins: [InheritsDomAttributes],
  render: function() {
    return (
      <div className="swoosh">
        Boom.
      </div>
    );
  }
});

React.renderComponent(
  <Swoosh />,
  document.getElementById('content')
);
Также полезно знать, что миксины еще не работают с es6. Skid Kadda
1

Есть альтернативный способ добиться этого, используя атрибуты данных в HTML. Вот небольшой пример: в html вы добавляете столько свойств с префиксом данных, сколько хотите:

<div id="root" data-prop-one="Property one" data-prop-two="Property two"/>

Все свойства данных будут автоматически преобразованы в свойства CamelCased в элементеdataset имущество. Передайте это свойство вашему компоненту React, и все готово:

let element = document.getElementById('root')
ReactDOM.render(<App myPropsObject={element.dataset}/>, element)

Похожие вопросы