我有一个像这样的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方法来做到这一点？
paw*_*wel 52
我已经使用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);
我遇到了类似的问题,动态生成的页面包含与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')
)
显然,从命名空间的角度来看,这可能有一些缺点:)
| 归档时间： |
|
| 查看次数： |
16885 次 |
| 最近记录： |