react基础知识

ReactDOM.render将模板转换为HTML语言，并插入指定的DOM节点。

<div id="example"></div>
ReactDOM.render(
  <h1>hello</h1>,
  documnet.getElementById('example')
);

运行结果

hello

React.createClass将代码封装成组件的形式，生成组件类，需要注意return中只能包含一个顶层标签，组件名第一个字母要大写。

<div id="progress"></div>
<script type="text/babel">
  var Progress=React.createClass({
    render:function(){
      return <h1>Hello{this.props.name}</h1>
    }
  });
  ReactDOM.render(
    <Progress name="john" />
    documnet.getElementById("example")
  );
<script>

运行结果

john

this.props.children组件内的所有子节点，无节点undifine，一个节点object，多个节点array，在使用时加上React.children来处理，使用React.children.map遍历组件内的所有子节点

<div id="example"></div>
<script type="text/babel">
  var Progress=React.createClass({
    render:function(){
      return (
        <ol>{
         React.Children.map(this.props.children,function(child){
return <li>{child}<li>
         })
        }</ol>
      );
    }
  });
  ReactDOM.render(
    <Progress>
      <span>hello</span>
      <span>everyone</span>
    </Progress>
  );
</script>

运行结果

hello
everyone

propTypes验证别人所提供的组件是否符合要求，在component可以接收任意值包括数字、字符串函数等

var data=123;
var MyTitle=React.createClass({
  propTypes:{React.PropTypes.string.isRequired},//定义类型为字符串
  render:function(){
    <h1>{this.props.title}</h1>
  }
});
ReactDOM.render(
  <MyTitle  title={data} />,
  document.getElementById("example")
);
*------------------------------------*
使用getDefaultProps设置初始化值
var MyTitle=React.createClass({
  getDefaultProps:function(){
    return {
      title：'welcome'
    };
  },
  render:function(){
    <h1>{this.props.title}</h1>
  }
});
ReactDOM.render(
  <MyTitle />,
  document.getElementById("example")
);

运行结果：

123
welcome

ref属性可以从component组件中获取真实的的DOM节点

var MyComponent=React.createClass({
  handelClick:function(){
    this.refs.myTextInput.focus();
  },
  render:function(){
    return (
      <div>
        <input type="text" refs="myTextInput"/>
        <input type="button" value="focus" onClick={this.handelClick}/>
    </div>
    ) ; 
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById("example");
)

运行结果：

Paste_Image.png