react学习笔记6：props组件传值和显示

我们在组件已经知道如何传值和如何接收值显示到组件xml中：

1.组件props的特性

我们在设置state的时候可以修改，并且渲染到xml中，

props可以接收值，不过这个值是不可以修改的

2.设置默认的props

我们知道state都是我们预先设置xml需要使用的内容，同样的我们接收的props还可以设置默认值，如果调用的位置没有传递，就会在xml显示默认设置，和es6函数的参数默认设置值同理：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
	static defaultProps = {//类的静态属性
        name: '默认值'
    };
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg: "hello",count: 1
        };

    }
	add(){
		var newcount=this.state.count+1;
		this.setState({count:newcount });
	}
	render() {
	 return <div>
	 	<p>{this.props.name}</p>
	 	<p>{this.state.msg}</p>
		<p onClick={this.add.bind(this)}>{this.state.count}</p>
	 </div>;
	}
}


ReactDOM.render(
    <div>
		<Event />
	</div>,document.getElementById('root')
);
registerServiceWorker();

设置默认值非常简单，采用static关键字修饰即可：

static defaultProps = {//类的静态属性
name: '默认值'
};

如果我们在调用位置传递的name属性，就会不采用默认值。

显示：

3.state和props交互

event组件定义状态msg，然后event2传递一个属性msg，这样在event2就可以用props直接显示了：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg: "hello"
        };

    }
	render() {
	 return <div>
	 	<p>{this.state.msg}</p>
		<Event2 msg={this.state.msg} />
	 </div>;
	}
}

//设置组件2
class Event2 extends React.Component {
	render() {
	 return <div>
	 	<p>{this.props.msg}</p>
	 </div>;
	}
}

ReactDOM.render(
    <div>
		<Event />
	</div>,document.getElementById('root')
);
registerServiceWorker();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!