首页 > 代码库 > React 2

React 2

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 = http://www.mamicode.com/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