为什么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();