React组件嵌套
react的嵌套不像vue那样会有全局和局部之分
react的嵌套关系就是谁在外边谁就是父组件(爸爸组件)
结合例子:
<body>
<div id="app">
</div>
<script type="text/babel">
let Component = React.createClass({
render(){
return(
<div className='test1'>
这是组件1
</div>
)
}
})
//创建组件二
let Son = React.createClass({
render(){
return (
<div className='test2'>
这里是组件二
<Component></Component>
</div>
)
}
})
ReactDOM.render(<Son/>,document.getElementById('app'))
</script>
</body>
slot插槽
和vue中一样
组件标签中存放的内容默认不会被渲染 而且react中没有slot
组件对象下 props.children可以用来获取组件标签中的内容
举例:
<script type="text/babel">
let Component = React.createClass({
render(){
return(
<div className='test1'>
这是组件1
<Son>
BIGBANG---《BANG BANG BANG》
</Son>
</div>
)
}
})
//创建组件二
let Son = React.createClass({
render(){
console.log(this)
return (
<div className='test2'>
这里是组件二
<h1>{this.props.children}</h1>
</div>
)
}
})
ReactDOM.render(<Component/>,document.getElementById('app'))
</script>
ref
可以绑定dom 也可以绑定组件
通过组件对象下的 refs进行获取
第一种方法,通过ref绑定dom
结合例子:
<body>
<div id="app">
</div>
<script type="text/babel">
let Component = React.createClass({
render(){
return(
<div className='test1'>
这是组件1
<Son>
</Son>
</div>
)
}
})
//创建组件二
let Son = React.createClass({
render(){
return (
<div className='test2'>
这里是组件二
<h1 ref='hehe'>不经历风雨,怎能见彩虹</h1>
<button onClick={()=>{
console.log(this.refs.hehe)
}}>点击</button>
</div>
)
}
})
/*
ref 可以用来绑定元素
通过组件对象下的 this.refs 进行获取
*/
ReactDOM.render(<Component/>,document.getElementById('app'))
</script>
</body>
第二种方法,通过ref绑定component
结合例子:
<body>
<div id="app">
</div>
<script type="text/babel">
let Component = React.createClass({
render(){
return(
<div className='test1'>
这是组件1
<button onClick={()=>{
console.log(this)
this.refs.son.sayHello()
}}>点击</button>
<hr/>
<Son ref='son'></Son>
</div>
)
}
})
//创建组件二
let Son = React.createClass({
sayHello(){
alert('你好')
},
render(){
return (
<div className='test2'>
这里是组件二
</div>
)
}
})
/*
ref除了可以绑定dom之外 还可以绑定组件
绑定之后可以获取到绑定组件的一切 方法
可以实现在父组件中调用子组件的方法
*/
ReactDOM.render(<Component/>,document.getElementById('app'))
</script>
</body>
react组件通信
- 父子通信 props refs
- 子父通信 props
- 亲兄弟通信 状态提升
- 远亲通信 全局状态管理 redux