内容
父组件向子组件传值
子组件向父组件传值
兄弟组件间的传值
React 事件
React 条件渲染
React 列表渲染
1. 父组件向子组件传值
父组件传递给子组件数据,单向流动,不能子传递给父。props的传值,可以是任意的类型。
Props可以设置默认值:组件名
.defaultProps = { key:”React”,msg:“cool” }
示例(父组件改变子组件的显示/隐藏):
class FatherCom extends React.Component{
constructor(props){
super(props);
this.state = {
isShow:true
}
this.myClick = this.myClick.bind(this) //改变函数this指向(每个函数都要写),也可把函数定义成箭头函数(可不写)
}
render(){
return(
<div>
<h1>我是父组件,可控制子组件</h1>
<button onClick={this.myClick}>点击显示子组件</button>
<SonCom isShow={this.state.isShow}/>
</div>
)
}
myClick(){
this.setState({
isShow:!this.state.isShow
})
}
}
class SonCom extends React.Component{
constructor(props){
super(props);
this.state = {} //注意此处接收isShow再调用无法操控
}
render(){
let isClass = '';
isClass = this.props.isShow ? ' active' : '';
return(
<div className={'current' + isClass}>
<h1>我出来了</h1>
</div>
)
}
}
ReactDom.render(
<FatherCom/>,
document.querySelector('#root')
)
2. 子组件向父组件传值
子向父传值,父组件通过为子组件传递函数,子组件通过props接收到函数,并操作函数。
示例(孩子改变父亲文字大小):
class FatherCom extends React.Component{
constructor(props){
super(props);
this.state = {
myStyle:{
fontSize:15
}
}
}
render(){
return(
<div>
<p style={this.state.myStyle}>我的字体大小受子组件控制</p>
<SonCom setSize = {this.setSize}/>
</div>
)
}
// 改变字体大小的函数,为了不单独绑定this,此处用箭头函数
setSize = (data)=>{
this.setState({
myStyle:{ // 要想改变数据,必须得一层一层往下找到数据再更改
fontSize:this.state.myStyle.fontSize + data
}
})
}
}
class SonCom extends React.Component{
constructor(props){
super(props);
this.state = {}
}
// 此处直接把父组件函数写在事件后。也可写在函数中,事件再调用函数
render(){
return(
<div>
<button onClick={()=>{this.props.setSize(5)}}>点击改变父组件字体大小</button>
</div>
)
}
}
ReactDom.render(
<FatherCom/>,
document.querySelector('#root')
)
兄弟组件间的传值
react提供了context:Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。
3. React 事件
特点
:
1:react事件,绑定事件的命名,驼峰命名法
。
2:{},传入1个函数
,而不是字符串。
3:React
返回的事件对象是代理的原生的事件对象
,如果想要查看事件对象的具体值,必须提前输出事件对象的属性。
示例(阻止默认行为,多个参数传递):
class MyCom extends React.Component{
constructor(props){
super(props);
this.state = {}
}
render(){
return(
<div>
<form action="http://www.baidu.com">
<button onClick={this.preventThis}>点击跳转</button>
</form>
<button onClick={(e)=>{this.clickEvent(1,2,3,e)}}>传递多个参数</button>
</div>
)
}
preventThis(e){
// 此处的事件对象是React 代理后的事件对象,所以无法用 return false 进行阻止默认行为
e.preventDefault()
}
clickEvent(a,b,c,e){
console.log(...arguments) // 1 2 3
console.log(e) // 事件对象
}
}
ReactDom.render(
<MyCom/>,
document.querySelector('#root')
)
注意:原生,阻止默认行为时,可以直接返回 return false;React中,阻止默认必须 e.preventDefault();事件还有很多,此处以 onClick 为例
4. React 条件渲染
React中条件渲染即为 JavaScript中,条件运算,如if…else…三元运算符等。
方式
:
1:直接通过条件运算 返回要渲染的JSX对象
。
2:通过条件运算得出jsx对象
,再 将JSX对象渲染到模板中
。
示例:
function Isok(){
return(
<h1>这是OK的</h1>
)
}
function Isno(){
return(
<h1>这是不允许的</h1>
)
}
class IsContent extends React.Component{
constructor(props){
super(props)
this.state = {
myThink:true
}
}
render(){
// if(this.state.myThink){
// return <Isok/>
// }else{
// return <Isno/>
// }
return this.state.myThink ? <Isok/> : <Isno/> // 所有的条件渲染规则均可自己定义,只要合乎 JSX 语法
}
}
ReactDom.render(
<IsContent/>,
document.querySelector('#root')
)
5. React 列表渲染
列表渲染等同于 Vue 的 v-for ;React中 将列表内容拼装成数组放置到模板中,将数据拼装成数组的JSX对象进行渲染。
常使用数组的map方法,对每一项数据按照JSX的形式进行加工,最终得到1个每一项都是JSX对象的数组,在将数组渲染到模板中;Key值需要放置到每一项中。
示例:
// 组件拼接(若要写事件,可以改用动态组件)
function ListCom(props){
return(
<li key={props.index}>
<h3>props.data.id</h3>
<a href="http">props.data.name</a>
</li>
)
}
class List extends React.Component{
constructor(props){
super(props)
this.state = {
hero:[
{
id:1,
name:'压缩'
},
{
id:2,
name:'永恩'
},
{
id:3,
name:'阿卡丽'
}
]
}
}
render(){ // 此处展示了多种渲染方式:1.直接在return中拼接;2.外部拼接;3.组件拼接
// let ListArr = [];
// ListArr = this.state.hero.map((item,index)=>{
// return(
// <li key={index} onClick={()=>{this.click1(item.id,item.name)}}>
// <h3>item.id</h3>
// <a href="http">item.name</a>
// </li>
// )
// })
/* --------------------------------------------------------------------------- */
return(
<div>
<h1>渲染出各个英雄</h1>
<ul>
{/* --------------------------------内部拼接------------------------------------------- */}
{/* {
this.state.hero.map((item,index)=>{
return(
<li key={index} onClick={()=>{this.click1(item.id,item.name)}}>
<h3>item.id</h3>
<a href="http">item.name</a>
</li>
)
})
} */}
{/* --------------------------------外部拼接------------------------------------------- */}
{/* {ListArr} */}
{/* --------------------------------组件拼接(注意此时的key值写在组件上)---------------------------------- */}
{
this.state.hero.map((item,index)=>{
return(
<ListCom key={index} data={item}/>
)
})
}
</ul>
</div>
)
}
click1 = (id,name)=>{
alert(id + name)
}
}
ReactDom.render(
<List/>,
document.querySelector('#root')
)
注意:之所以需要对数组操作,是因为 React 只接受数组格式的渲染。