reactJs组件属性this.props

reactJs组件属性this.props是什么？

reactJs组件属性设置

1.键值对方式设置（键 ：值）

值可以有多种形式  <HelloWorld name= ? />

• 字符串："XiaoWang"

• 求值表达式 {123}、{"XiaoWang"}

• 数组{[1,2,3]}

• 变量{variable}

• 函数求值表达式{function}（不推荐，如果需要函数可以单独把函数提取出来然后单独调用函数）

var HelloWorld =React.createClass({
    rencer:function () {
        return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
    },
});
var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {name: ''};
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return <div>
        <HelloWorld name={this.state.name}></HelloWorld>
        <br/>
        <input type="text" onChange={this.handleChange} />
        </div>
    },
});
ReactDom.render(<HelloUniverse />,document.body);

2.展开语法{...props}

React会自动把对象中的属性和值当做属性的赋值

var HelloWorld =React.createClass({
    rencer:function () {
        return <p>Hello,{this.props.name1 + ' 'this.props.name2}</p>;
    },
});
var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {
            name1:'Tim',
            name2:'John',
        };
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return <div>
        <HelloWorld name={...this.state}></HelloWorld>
        <br/>
        <input type="text" onChange={this.handleChange} />
        </div>
    },
});
ReactDom.render(<HelloUniverse />,document.body);

验证组件属性：propTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

• 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。

var data = 123;
ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

这样一来，title属性就通不过验证了。控制台会显示一行错误信息

设置组件属性的默认值：getDefaultProps

getDefaultProps 方法可以用来设置组件属性的默认值。

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

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(<MyTitle />,document.body);

获取组件的所有子节点：this.props.children

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
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取。这里需要注意， this.props.children 的值有三种可能：

1. 如果当前组件没有子节点，它就是 undefined；

2. 如果有一个子节点，数据类型是 object；

3. 如果有多个子节点，数据类型就是 array

ReactJs提供一个工具方法 React.Children 来处理 this.props.children ，我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

1.遍历子节点：React.Children.map

object React.Children.map(object children, function fn [, object context])
在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。

如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。

2.React.Children.forEach

React.Children.forEach(object children, function fn [, object context])
类似于 React.Children.map()，但是不返回对象。

3.统计子节点组件总数：React.Children.count

number React.Children.count(object children)
返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。

4.React.Children.only

object React.Children.only(object children)
返回 children 中仅有的子级。否则抛出异常。

reactJs组件this.props需要注意的几点

1、获取属性的值用的是this.props.属性名

2、创建的组件名称首字母必须大写。

3、为元素添加css的class时，要用className.

4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}