React父層傳遞資料到子層 props.children

透過一個組件將將其他組件包起來，管理padding及margin或是透過該組件傳遞資料

可以在父組件使用{props.children}傳遞這些被父組件包起來的資料

// 接收子組件資料
// BaseContainer.jsx
const BaseContainer = () => {
	return (
		<div>
			{props.children}
		</div>
	)
}

// 
const test = () => {
	return(
		<BaseContainer>
			<div>我是DOM元素</div>
			<div>我是DOM元素</div>
			<div>我是DOM元素</div>
		</BaseContainer>
	)
}

React子層傳父層

React製作slide Toggle

利用改動資料來更新畫面達到效果，使用框架要減少操作DOM的機率

使用 .map return一筆Array資料

// json 
import faqList from './faqList.js'

faqList.map((item, index) =>
	<div className="active">
		<h2>{item.title}</h2>
		<p>{item.list}</p>
	</div>
)

在原本資料(Array)新增一筆值(object新增)紀錄class開關屬性

// 新增一個isOpen屬性作為判斷值
const orgTitleList = faqList.data.map(item => (
    {...item, isOpen: false}
))

資料更新時須使用useState()來渲染更新的畫面

// 將剛剛更新的變數，放入useState作為初始值
const [titleList, setTitleList] = useState(orgTitleList)

// 資料渲染改為useState的titleList
titleList.map( (item, index) => <div onClick={() => slideToggle (index)}>....</div> )

寫入點擊邏輯, 用setTitleList更新資料，渲染畫面

const slideToggle = (currentIndex) => {
	// 點擊自身以外的須關閉
	titleList.map((item,index) => {
	    if(index !== currentIndex) {
	        titleList[index].isOpen = false
	    }
	})
	// 點自己開合
	titleList[currentIndex].isOpen = !titleList[currentIndex].isOpen
	setTitleList([...titleList])
}

React useEffect無限迴圈

可以使用React Hook ,useCallback

import React, {useEffect, useCallback} from 'react'

const testComponent = () => {

	const testFunction = useCallback(() => {
	
	},[])

	useEffect(() => {
		testFunction ()
	}, [testFunction ])

}