属性的含义和用法

含义：
props=properties
属性：一个事物的性质和关系属性是不可以由组件自己修改的
用法：
1、直接在调用组件的时候传入一个键值对

<HelloWorld  name =  ? />

问号处可以填字符串（“Tom”）、大括号大括号中填写求值表达式可以是数字（{123}）字符串（{“Tom”}）、数组（{[1，2，3]}）、传入变量（{variable}）另外一种特殊的形式比如特殊的求职表达式用来代替if语句的那种详情看上一篇博客

2、用React的展开语法
当用一个大括号包裹三个点加一个对象 React会自动的将对象中的属性和值当做对象的赋值

var props={
	one:"123",
	two:321
}

如果采用第一种键值对的方式那么就要写成这样过

<HelloWorld one={props.one} two={props.two}/>

简写为

<HelloWorld {...props}/>

3、调用React提供的setProps函数（已被删除不能使用了）

var instance = React.render(<HelloWorld/>,document.body);
instance.setProps({name:"Tom"});

在实际操作中几乎不会使用

实例
第二种方法

 var HelloWorld = React.createClass({
            render:function () {
                return <p> Hello ,{this.props.name1+' '+this.props.name2}</p>
            },
            componentWillUnmount:function () {
                console.log("BOOOOOOOOOM!!!")
            }
        });
         var HelloUniverce= React.createClass({
            getInitialState:function () {
                return {
                    name1:"Tim",
                    name2:"Jon",
                };
            },
            handleChange:function (event) {
                if(event.target.value == "123"){
                    //getElementsByTagName必须是一开始装载的节点即        ReactDOM.render(<div style={style}><HelloUniverce/></div>,document.body);
                    ReactDOM.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
                    //一定要加return来阻止想笑执行
                    return ;
                }
                this.setState({name:event.target.value});
            },
            render:function () {

                return <div>
                    <HelloWorld {...this.state}/>
                    <br/>
                    <input type="text" onChange={this.handleChange}/>
                </div>

            }

属性的含义和用法

猜你喜欢