說好的精通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: "<span>這是渲染的 HTML 內容</span>" }}></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添加類的屬性創建的組件此組件創建簡單。