Question

我可能错过了什么，但是这里有。如果我有：

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

Answer 1

不，当然你可以这样做：

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)）。

Answer 2

API中没有任何内容可以将属性从普通DOM元素传输到React组件，但您可以创建一个Mixin来执行此操作。请注意，这仅适用于传递给renderComponent的组件，因为它使用setProps：

（Working 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')
);

Answer 3

还有另一种方法可以通过使用html中的数据属性来实现。这是一个小例子：在html中，您可以根据需要添加尽可能多的带有数据前缀的属性：

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

所有数据属性将自动转换为元素的dataset属性中的CamelCased属性。将此属性传递到您的React组件，就可以完成：

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

将模板中的props传递给react.js根节点

3 个答案: