react组件嵌套
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>React 實例</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">var object= [11,22,333]var WebSite = React.createClass({render: function() {return (<div><BaBa name={this.props.name} /><br/><MaMa site={this.props.site} /><br/><Show mess={this.props.mess} /></div>);}});var BaBa = React.createClass({render: function() {return (<h1>{this.props.name}</h1>);}});var MaMa = React.createClass({render: function() {return (<div><h1>子組件2的數據：</h1><a href={this.props.site}>{this.props.site}</a></div>);}});var Show = React.createClass({render: function() {return (<h1>子組件3的數據： {this.props.mess}</h1>);}});ReactDOM.render(<WebSite name="子組件1" site="https://blog.csdn.net/qq_24147051/" mess={object} />,document.getElementById('example'));</script></body>
</html>
運行的效果：
這個是 菜鳥教程里面的一個實例，看著十分簡單。但是里面有一些細節問題。我是想說一下的。
注意點：
-
在render 渲染的時候 ，最頂層只能有一個HTML標簽，不能有并列的標簽（也就是說每個組件有且僅有一個根節點）
-
組件聲明的時候首字母一定要大寫，否則的話，該組件將不會注冊成功。
-
當JSX包含多行代碼時，將它們包含在小括號中
-
在父組件內定義一個變量，然后賦值。子組件通過 this.props.變量名 獲取該變量的值。如果子組件需要向父組件傳遞數據，則父組件需要給該變量綁定一個可以傳值的函數。
-
react會默認展開數組數據，如果需要遍歷數組里面的對象類型數據，需要給每一項加上一個獨一無二的Key(否則react會提示警告，加上后有利于react的differ算法對DOM進行操作)
以上都是自己關于這個例子的總結和采坑經驗，所以呢，小伙子，路還是很長的~
菜鳥地址：http://www.runoob.com/react/react-components.html
總結
- 上一篇： 厨房标语文案之后厨规范标识牌标语文案28
- 下一篇： json数据格式化展示出来