基本使用
向组件传递数据,在组件内可以使用props这个对象来调用数据。
类组建
var react = 'react'
class Person extends React.Component{
render(){
console.log(this.props) //hello react
return <div>
<p>{react}</p>
<p>{this.props.name }</p>
</div>
}
}
ReactDOM.render(<Person name='hello react' />,document.getElementById('app'))
函数组建
function Person2(props){
console.log(props,'函数组建') //hello web
return <div>
<p>{react}</p>
<p>{props.name }</p>
</div>
}
ReactDOM.render(<Person2 name='hello web' />,document.getElementById('app2'))
注意
-
props在组件内值是可读的,组件内不能修改props
-
如果props的数据源被修改,那么组件内得到的props数据也会随着修改(数据驱动DOM)
设置props初始值
类组件
class Person extends React.Component{
static defaultProps = {
name:'hello react'
}
render(){
return <div>
<p>{this.props.name}</p>
</div>
}
}
ReactDOM.render(<Person/>,document.getElementById('app'))
在类组件中使用static关键字,给defaultProps 属性定义内容
函数组建
function Person2(props) {
return <div>
<p>{props.name}</p>
</div>
}
Person2.defaultProps = {
name:'hello web'
}
ReactDOM.render(<Person2/>,document.getElementById('app2'))
在函数组件中,直接给函数名后面添加一个defaultProps属性就可以初始化我们的props值
props.children
class App extends React.Component{
render(){
console.log(this)
return <div>
<p>你好react</p>
{this.props.children} ///h1
</div>
}
}
ReactDOM.render(<App><h1>hello world </h1></App>,document.getElementById('app'))
props 的注意事项
-
props 用于传递数据,这个数据是一个单向传递,从根节点组件向它的子孙组件传递,逆向传递是不被允许的
-
子孙组件如果想修改根节点组件的状态,需要根节点组件给子孙组件传递事件方法
事件函数中this问题
-
事件函数中的this 不是我们的组件实例对象 而是undefined
-
在构造器constructor里需要对事件函数进行this绑定,否则函数中的this都是undefine
通过 props.children 属性可以获取到在调用组件时填充到组件标签内的内容
单向数据流
1.react 中关于数据的流动有一条原则,就是单向数据流,自顶向下,从父组件到子组件
2.单向数据流特性要求我们共享数据要放置在上层组件中
3.子组件通过调用父组件传递过来的方法更改数据
4.当数据发送更改时,react会重新渲染组件
5.单向数据流时组件之间的数据流动变得可预测,使定位错位变得简单
class App extends React.Component{
click(){
console.log('我来自父组建')
}
render(){
return <div>
<h1>父组建</h1>
<Child onHaha = {this.click}></Child>
</div>
}
}
class Child extends React.Component{
constructor(){
super()
this.fn = this.fn.bind(this)
}
fn(){
console.log('子组建')
console.log(this)
this.props.onHaha()
}
// <button onClick = {this.props.onHaha}> 事件传递</button>
render (){
console.log(this)
return <div>
<h4>子组建</h4>
<button onClick = {this.fn}> 事件传递</button>
</div>
}
}
ReactDOM.render(<App/>,document.getElementById('app'))