[关闭]
@lizlalala 2016-05-07T11:31:52.000000Z 字数 1236 阅读 865

react学习(二)

react


总结

1.jsx
js语法与html混用,optional,but recommend
- js部分需要用{}包裹,否则不能正确识别加以解析
- {}中可以为js代码,也可以为变量。

2.组件
组件相当于若干个tag的对外封装,也相当于一个函数,接受若干属性,然后通过this.props..传递给内部tag。
- 组件首字母需大写
- 组件类的render方法required,用于输出
- 只能有一个顶层标签(也就是说return的时候如果多个标签的话用一个div将他们包裹起来就好)
- 组件的属性可以任意加,在js中可以通过this.props.attributes来获取。需要注意
class 属性需要写成 className ,for —> htmlFor (因为 class 和 for 是 JavaScript 的保留字。)
- 注意return的时候不能直接回车哈,之前js好像有讲过直接回车会把空格当成什么来着。。或者可以加一个(),继续保持内部内容的整洁
- this.props.children是所有子节点,= undefined|object|array 。可以用React.Children.map来遍历

  1. var MyComponent3 = React.createClass({
  2. render:function(){
  3. return (<ol>
  4. {
  5. React.Children.map(this.props.children,function(ele){
  6. return <li>{ele}</li>;
  7. })
  8. }
  9. </ol>)
  10. }
  11. });
  12. //ReactDOM.render(<MyComponent1 data="hidden-info" className="component"/>,document.getElementById('example'));
  13. ReactDOM.render(
  14. <MyComponent3>
  15. <a>link1</a>
  16. <a>link2</a>
  17. </MyComponent3>,
  18. document.getElementById('example'));

references

1.服务器环境

2.英文版教程

3.中文镜像教程

4.阮一峰教程

5.react中文索引

to read

1.语法介绍
2.事件清单

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注