javascript
var One = React.createClass({
render: function(){
return (
<div>我是第一个组件</div>
);
}
});
var Two = React.createClass({
render: function(){
return (
<div data-var="data">我是第二个组件</div>
);
}
});
ReactDOM.render(
<div>
<One /><Two />
</div>,
document.getElementById('app')
);
html
<div id="app"></div>
把html页面按组件加载出来,但是假如我“Two”组件的“data-var”是需要后端assign的,那我要用什么方式去获取到这个assign的值?
如果是纯html的话还可以按照后端要求直接写标识符让后端渲染出来,如:
html
<div data-var="{dataVar}">我是第二个组件</div>
但显然如果用React.js渲染的话不能用这种方法,难道每个数据都要用ajax吗?这样页面加载的时候还要执行ajax不是速度变慢了?
还是我的开发方式不对?
服务端渲染,ajax
在最外层的 做“同步的”AJAX请求 然后通过props把数据分发到各个组件上
推荐阅读w3school的ajax部分
http://www.w3school.com.cn/ajax/
还有js控制html dom的部分帮助理解,虽然react不需要你直接控制dom,但毕竟是这么个道理
http://www.w3school.com.cn/js/js_htmldom_html.asp
fetch api
查看了各类文章终于找到了解决方法。
假如是用php的可以使用php扩展 v8js 不过需要php版本 >= 7
因php版本问题只能放弃,转而使用node.js,有需要可以参考文章:点我点我
PS:node.js的参考文章有部分错误
reactify
不能用字符串,需要加载reactify组件,没有的话需要
npm install reactify --save-dev
<MyComponent number={initProps.num} /<
改为
<MyComponent number={initProps.num} />
https://.com/a/1190000005040834
参考这个吧,里面有对后端请求方面的内容