react 三

2018-08-23

this.props.children （react提供一个工具方法 React.children来处理this.props.children)

1 this.props 对象的属性与组件的属性一一对应，但this.props.children属性，它表示组件的所有的子节点。
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>hello</span>
        <span>world</span>
      </NotesList>,
      document.body
    );
    //展示出来的是 hellow world
    注意：this.props.children的值三种可能
    1 如果组件没有子节点 ，就是undefind
    2 如果有一个子节点。数据类型是object
    3 如果是多个子节点，数据类型就是array
    所以我们就用React.Children.map来遍历子节点

PropTypes

组件的属性可以接受任意值，字符串，对象，函数等，有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的propsTypes属性，来验证实例属性是否符合要求。
var MyTitle = React.createClass({
    propTypes: {
      title: React.PropTypes.string.isRequired,
    },

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

  上面例子表明，在MyTitle有一个title属性，并且该属性是字符串类型，且是必填。

getDefaultProps 用来设置组件属性的默认值

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

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

ReactDOM.render(
  <MyTitle />,
  document.body
);

获取真实的Dom节点

  1：从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
  2：this.refs.[refName] 返回真实的Dom节点  
  （觉得和vue的ref用法一样）
  3: ref 的回调函数方式
  例：<input
  type="text"
  ref={(input) => { this.textInput = input; }} />
  //此时input参数就是表示该DOM本身
<input
         用this.textInput.value  可以取到input实时的值。
  3：React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，

表单

用户在表单填入内容，属于用户跟组件互动，不能用this.props。
ar Input = React.createClass({
      getInitialState: function() {
        return {value: 'Hello!'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function () {
        var value = this.state.value;
        return (
          <div>
            <input type="text" value={value} onChange={this.handleChange} />
            <p>{value}</p>
          </div>
        );
      }
    });

    ReactDOM.render(<Input/>, document.body);
    注意：获取文本输入框的值，要定义一个onChange事件的回调函数，通过event.target.value来获取。
      textarea,select,radio都是这种情况。

Ajax请求

1 选择一个HTTP库
以axios为例
import React from 'react'
  import ReactDOM from 'react-dom';
  import axios from 'axios';  //引入axios库
  class FetchDemo extends React.Component {
    constructor(props) {    
      super(props);    
      this.state = {        
        posts: []            //把posts设为空数组
      };
    }
    componentDidMount() {  //在componentDidMount 进行Ajax请求
      axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)
        .then(res => {
          const posts = res.data.data.children.map(obj => obj.data);
          this.setState({ posts });  //在this.setState里面重新赋值
        });
    }
    render() {
      return (
        <div>
          <h1>{`/r/${this.props.subreddit}`}</h1>
          <ul>
            {this.state.posts.map(post =>
              <li key={post.id}>{post.title}</li>
            )}
          </ul>
        </div>
      );
    }
  }
  ReactDOM.render(
    <FetchDemo subreddit="reactjs"/>,
    document.getElementById('root')
  );
  步骤，方法
  1 先引入axios库
  2 然后在constructor 里先调用super，接着初始化state，让它拥有一个posts空数组
  3 componentDidMount是关键所在，这个方法将会在组件插入DOM的第一时间执行。该方法在整个组件的生命周期只会执行一次。
  4 它使用axios.get方法从subreddit获取数据，反引号的字符串是ES6的模板字符串，${}部分是由表达式的值所取代，所以URL传递给axios.get