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

为什么80%的码农都做不了架构师？>>>   

我们在组件已经知道如何传值和如何接收值显示到组件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 

	 	
{this.props.name}
	 	
{this.state.msg}
		
{this.state.count}
	 
;
	}
}


ReactDOM.render(
    

		
	
,
    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 

	 	
{this.state.msg}
		
	 
;
	}
}

//设置组件2
class Event2 extends React.Component {
	render() {
	 return 

	 	
{this.props.msg}
	 
;
	}
}

ReactDOM.render(
    

		
	
,
    document.getElementById('root')
);
registerServiceWorker();

 

转载于:https://my.oschina.net/tbd/blog/1544678