郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript教程 >

reactJs组件属性this.props

来源:郑州网站建设 作者: 懒人建站 日期:2016-12-16 人气:
属性是由父组件传递给子组件的,reactJs组件属性设置,reactJs组件this.props需要注意的几点 1、获取属性的值用的是this.props.属性名 2、创建的组件名称首字母必须大写。 3、为元素添加css的

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

1、属性是由父组件传递给子组件的
2、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}}

本文链接:reactJs组件属性this.propshttp://www.51xuediannao.com/javascript/react_props.html

reactJs组件属性this.props由懒人建站收集整理,您可以自由传播,请主动带上本文链接

懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

(责任编辑:懒人建站)