是否有正确的方法将数据从 HTML 页面传递到 React 组件？

IT技术 reactjs
2021-05-22 07:51:12

我有一个这样的 React 应用程序。

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

feed prop 用于在 componentDidMount 中获取特定客户独有的 JSON 提要。

将数据从 HTML 传递到我的 React 应用程序以对其进行参数化会很方便：

<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 方法来做到这一点？

4个回答

我已经data-为各种props使用了属性，然后使用 destructuring 传递了所有props{...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：更新的小提琴

我有一个类似的问题，动态生成的页面包含与 React 相关的数据。

我刚刚在全局范围内声明了它们..

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

.. 然后 ..

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

显然，从命名空间的角度来看，这可能有一些缺点:)

您可以在安装组件时传递数据，如下所示：

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

React Habitat是一个框架，如果你想要一些可重用和可扩展的东西，它可以促进这一点。

你像这样注册 React 组件

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

然后使用 props 在 HTML 中定义目标

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

React Habitat 会在它们出现在 HTML 中时将它们连接起来。

披露：我是这个框架的主要维护者之一。

其它你可能感兴趣的问题
上一篇过滤器逻辑应该在前端还是后端？ 下一篇React css 转换无法正常工作