React-属性的介绍与应用

概要

属性的介绍

属性的用法

示例代码

//ES6 写法
"use strict";
class HelloMassage extends React.Component {
    render() {
        //数组的调用方法
        // var commentNode = this.props.name.map(function(datavalue, datakey) {
        //     return <div key={datakey}>Hello，{datavalue}！</div>
        // });
        return (
            //数组的调用方法
            // <div>{commentNode}</div>
            <h1 className="h1">{this.props.name}</h1>
        )
    }
}
//通过变量传递
var data = "通过一个变量传递属性";
ReactDOM.render(
    // <HelloMassage name="xiaochuan" />,//xiaochuan
    // <HelloMassage name={123} />,//123
    // <HelloMassage name={"孙小川"} />, //孙小川
    // <HelloMassage name={["1","2","3"]} />, //需要在上面使用 map 方法映射键值对
    //数组输出：Hello， 1！ Hello， 2！ Hello， 3！ 
    <HelloMassage name={data} />,
    document.getElementById("example")
);

//ES5 写法
var HelloMassage = React.createClass({
    render: function() {
        return (
            // <div>{this.props.name}</div>
            //调用一个对象多个属性的写法
            <div>Hello，{this.props.name1}，{this.props.name2}</div>
        );
    }
});
//传递一个对象
var props = {
    name1: "xiaochuan",
    name2: "xiaoming"
};
ReactDOM.render(
    // <HelloMassage name="xiaochuan" />,
    //传递一个对象的写法
    <HelloMassage {...props} />, //Hello，xiaochuan，xiaoming
    document.getElementById("example")
);

默认属性的 & 属性校验器

//ES6 写法
"use strict";
class HelloMassage extends React.Component {
    render() {
        //数组的调用方法
        // var commentNode = this.props.name.map(function(datavalue, datakey) {
        //     return <div key={datakey}>Hello，{datavalue}！</div>
        // });
        return (
            //数组的调用方法
            // <div>{commentNode}</div>
            // <h1 className="h1">{this.props.name}</h1>
            //测试默认属性
            <h1>{this.props.title}</h1>
        )
    }
}
//通过变量传递
var data = "通过一个变量传递属性";
//属性校验器，表示必须是 string
HelloMassage.propTypes = {
    title: React.PropTypes.string,
};
//设置默认属性
HelloMassage.defaultProps = {
    title: "321"
};
ReactDOM.render(
    // <HelloMassage name="xiaochuan" />,//xiaochuan
    // <HelloMassage name={123} />,//123
    // <HelloMassage name={"孙小川"} />, //孙小川
    // <HelloMassage name={["1","2","3"]} />, //需要在上面使用 map 方法映射键值对
    //数组输出：Hello， 1！ Hello， 2！ Hello， 3！ 
    // <HelloMassage name={data} />,
    //测试默认属性
    <HelloMassage />,
    document.getElementById("example")
);

//ES5 写法
var HelloMassage = React.createClass({
    //设置默认属性
    getDefaultProps: function() {
        return {
            name: "123"
            // name: 1//由于在下面指定了类型为 string 这里如果设置为 1 的话就会报错
        };
    },
    //属性校验器，表示必须是 string
    propTypes: {
        name: React.PropTypes.string,
    },
    render: function() {
        return (
            // <div>{this.props.name}</div>
            //调用一个对象多个属性的写法
            // <div>Hello，{this.props.name1}，{this.props.name2}</div>
            //调取 name 属性的默认值 
            <div>Hello，{this.props.name}</div> //Hello，123
        );
    }
});
//传递一个对象
var props = {
    name1: "xiaochuan",
    name2: "xiaoming"
};
ReactDOM.render(
    // <HelloMassage name="xiaochuan" />,
    //传递一个对象的写法
    <HelloMassage {...props} />, //Hello，xiaochuan，xiaoming
    document.getElementById("example")
);