React 2

标签：方法   slist   amp   开头   str   children   第一个   ...   定义   

1.JSX语法  例dome4

遇到HTML标签(以<开头)，就用html解析；

遇到代码块(以[开头)，就用JS解析；

<div id="example"></div>
　　<script type="text/babel">
　　　　var arr=[
　　　　　　<h1>qweqqwe</h1>,
　　　　　　<h2>qweqqwe</h2>,
　　　　　　];
　　　　ReactDOM.render(
　　　　　　<div>{arr}</div>,
　　　　　　document.getElementById("example")
　　　　)
　　</script>

变量是数组，Jsx会把它的所有成员遍历渲染，添加模板

2.组件 例demo5

　　React.createClass 方法生成一个组件类

　　return <h1>hello {this.props.name}</h1>

　　ReactDOM.render(

　　　　< ... name="John" />

　　　　document.·····

　　)

　　<style>

　　　　.red{
　　　　　　color: red;
　　　　}
　　</style>
　　<div id="example"></div>
　　<script type="text/babel">
　　　　var Header = React.createClass({
　　　　　　render:function(){
　　　　　　　　return <h1 className={this.props.color}>{this.props.name}节</h1>
　　　　　　}
　　　　});
　　　　ReactDOM.render(
　　　　　　<Header name="妇女" color="red"/>,
　　　　　　document.getElementById("example")
　　　　);
　　</script>

　　组件类的第一个字母必须大写  var Header

　　组件只能包含一个顶层标签   ！！   （再封装个？）

3.this.props.children   例demo5

　　React.children.map  遍历子节点

　<div id="example"></div>

　<script type="text/babel">
　　var NotesList = React.createClass({
　　　　render: function() {
　　　　　　return (
　　　　　　　　<ol>
　　　　　　　　{
　　　　　　　　　　React.Children.map(this.props.children,function (child){
　　　　　　　　　　　　return <li>{child}</li>;
　　　　　　　　　　})
　　　　　　　　}
　　　　　　　　</ol>
　　　　　　);
　　　　}
　　});

　　ReactDOM.render(
　　　　<NotesList>
　　　　　　<span>qwewe</span>
　　　　　　<span>qwe</span>
　　　　</NotesList>,
　　　　document.getElementById(‘example‘)
　　);
　</script>

4.protypes

　方法一：

　　　　定义一个变量值

　　　　创建一个组件：定义一个属性.定义个render。

　　　　ReactDOM.render 属性写入render中.变量值写入属性

　　　　document  写入页面

　　　　<div id="example"></div>

　　　　<script type="text/babel">

　　　　　　var data = 123;

　　　　　　var MyTitle = React.createClass({
　　　　　　　　propTypes: {
　　　　　　　　　　title: React.PropTypes.string.isRequired,
　　　　　　　　},

　　　　　　　　render: function() {
　　　　　　　　　　return <h1> {this.props.title} </h1>;
　　　　　　　　}
　　　　　　});

　　　　　　ReactDOM.render(
　　　　　　　　<MyTitle title={data} />,
　　　　　　　　document.getElementById(‘example‘)
　　　　　　);

</script>

　方法二：

　　　　创建一个组件：定义一个 render(带有属性的组件)

　　　　定义一个带有属性的render数组

　　　　申明render.渲染

　　　　function Welcome(props) {

　　　　　　return <h1>Hello, {props.name}</h1>;

　　　　}

　　　　function App() {

　　　　　　return (

　　　　　　　　<div>

　　　　　　　　　　 <Welcome name="Sara" />

　　　　　　　　　　 <Welcome name="Cahal" />

　　　　　　　　　　 <Welcome name="Edite" />

　　　　　　　　</div>

　　　　　　);

　　　　}

　　　　ReactDOM.render(

　　　　　　<App />,

　　　　　　document.getElementById(‘root‘)

　　　　);

getDefaultprops 可以用来设置组件属性的默认值

React 2

标签：方法   slist   amp   开头   str   children   第一个   ...   定义   

原文地址：http://www.cnblogs.com/wangkang894/p/6547683.html