内容
父组件向子组件传值
子组件向父组件传值
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')
)
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 只接受数组格式的渲染。