说好的精通React框架，这些技巧学到家了吗（上）

动态绑定className

原理：通过三元表达式控制className值。

render(){
	const flag=true
	return (
		<div className={flag ? "active" : "no-active"}> Hello </div>
	)
}

绑定事件

场景：交互就会涉及到事件点击，然后点击值传参也是一个很常见的场景。

import React from "react";
import { Button } from 'antd'

export default class Three extends React.Component{
	state={
		flag:true.
		flagOne: 1
	};
	click(data1,data2){
		console.log('data1 值为',data1)
		console.log('data2 值为',data2)
	}
	render(){
		return (
		<div>
			<Button type="primary" onClick={this.click.bind(this,'参数 1','参数 2')}>点击事件</Button>
      </div>
		</div>
		);
	}
}

给DOM设置和获取自定义属性

作用：有些要通过自定义属性传值。

export default class Thirty extends React.Component{
	click = e =>{
		console.log(e.target.getAttribute("data-row"));
	};
	render() {
    return (
      <div>
        <div data-row={"属性1"} data-col={"属性 2"} onClick={this.click}>
          点击获取属性
        </div>
      </div>
    );
  }
}

循环元素

内部没有封装像vue里面v-for的指令，另外通过map遍历。

{arr.map((item,index)=>{
	return(
		<div key={item.id}>
			<span>{{item.name}}</span>
			<span>{{item.age}}</span>
		</div>
	)
})}

React.Fragment

作用：React.Fragment可以让你聚合一个子元素列表，并且不在DOM中增加额外的内核。

render(){
	const {info} = this.state;
	return(
		<div>
			{info.map{item,index)=>{
			return(
				<React.Fragment key ={index}>
				<div>{{item.name}}</div>
				<div>{{item.age}}</div>
				</React.Fragment>
			);
        })}
      </div>
    );
  }

React.cloneElement

React.cloneElement(
	element,
	[props],
	[...children]
)

作用：这个方法的作用是复制组件，给组件传值或添加属性核心。

React.Children.map(children,child=>{
	return React.cloneElement(child,{
		count:__this.state.count
	});
});

在React使用innerHTML

场景：有些后台返回是html格式，就需要用到innerHTML属性。

export default class TwentyFive extends React.Component{
	render(){
	return(
	 <div dangerouslySetInnerHTML={{ __html: "这是渲染的 HTML 内容" }}></div>
	)
	}
}

在JSX打印falsy值

• falsy值（虚值）是在布尔值上下文中识别为false的值；
• 值有0，“”，“，``，null，undefined，NaN

export default class TwentyThree extends React.Component{
	state={myVariable:null}
	render(){
	return(
		<div>{String(this.state.myVariable)}</div>
	)
	}
}

反应组件

作用：是基于ES6类的React组件，React允许定义一个类或功能作为组件，那么定义一个组件类，就需要继承React.Component。

export default class TwentyTwo extends React.Component{
	render(){
		return(
		 <div>这是技巧22</div>
		)
	}
}

元素是否显示

一般用三元表达式

 flag?<div>显示内容</div>:''
 flag&&<div>显示内容</div>

static使用

场景：声明静态方法的关键字，静态方法是指即使没有组件实例也可以直接调用。

export default class Nine extends React.Component{
	static update(data){
		 console.log('静态方法调用执行啦')
	}
	render() {
    return (
      <div>
        这是 static 关键字技能
      </div>
    );
  }
}
Nine.update('2')
}

组件定义方法

方式1：ES5的功能定义

function FunCom(props){
	return <div>这是Function 定义的组件</div>
}
ReactDOM.render(<FunCom name="Sebastian" />, mountNode
// 在 hooks 未出来之前,这个是定义无状态组件的方法,现在有了 hooks 也可以处理状态

方式2：ES5的createClass定义

const CreateClassCom = React.createClass({
	render:function(){
	return <div>这是React.createClass定义的组件</div>
	}
})

方式3：ES6的扩展

class Com extends React.Component{
 render(){
    return(<div>这是React.Component定义的组件</div>)
  }
}

ES5的createClass是利用功能模拟类的写法做出来的es6; 通过es6添加类的属性创建的组件此组件创建简单。