一、為DOM組件設置Props

1.用JSX語法對標簽的類名進行設置屬性名是className；

2.用JSX語法對標簽的樣式進行設置要使用鍵值對進行設置，帶“-”時用小駝峰方法來書寫；

3.當一個標簽的屬性過多時，可以通過JSX語法進行展開設置；

function App() {const imgData = {src: "https://tse4-mm.cn.bing.net/th/id/OIP-C.umAQs2BlpaAaJt5OJ66ljAHaIr?rs=1&pid=ImgDetMain",alt: "星極天下第一",className: "image",style: {height: 100,border: "1px solid red",padding: "10px",backgroundColor: "yellow"}}return (<><img {...imgData} /></>)
}export default App

效果：

二、自定義React組件設置Props

interface ArticleModel {title: string;content: string;active: boolean;
}function Article (props: ArticleModel) {return (<div><h2>{props.title}</h2><p>{props.content}</p><p>狀態：{props.active ? '已發布' : '未發布'}</p></div>)
}function App() {const articleList = [{title: '文章1',content: '文章1的內容',active: true}, {title: '文章2',content: '文章2的內容',active: false}]const renderArticleList = () => {return articleList.map((item, index) => {return <Article key={index} {...item} />})}return (<>{renderArticleList()}</>)
}export default App

效果：

三、將JSX作為Props傳遞（相當與vue里面的插槽slot）

? ? ? ? react中props有一個默認屬性，傳遞JSX值，是children，如下：

function List (props: any) {return (<><h2>{props.title}</h2><ul>{props.children}</ul><p>{props.footer}</p></>)
}function App() {return (<><List title="List 1"><li>a內容一</li><li>a內容二</li><li>a內容三</li></List><List title="List 2" footer="底部信息"><li>b內容一</li><li>b內容二</li><li>b內容三</li></List></>)
}export default App

效果：

?四、子組件向父組件傳值

import { useState } from "react"function Detail ({onActive}: any) {const [state,setState] = useState(true)function handleClick () {setState(!state)onActive(!state)}return (<div><p>detail的內容</p><button onClick={handleClick}>改變狀態</button><p>子組件：{state ? '激活' : '未激活'}</p></div>)
}function App() {const [state,setState] = useState(true)function handleClick (state: boolean) {setState(state)}return (<><Detail onActive={handleClick} /><div>父組件：{state ? '激活' : '未激活'}</div></>)
}export default App

?效果：

五、用Context進行多級組件傳值

? ? ? ? react在手寫遞歸組件時，可以用createContext、useContext和LevelContext.Provider進行層級的判斷，如下：

import { createContext, useContext } from "react"const LevelContext = createContext(1)function Dg ({children}: {children: React.ReactNode}) {const level = useContext(LevelContext)const getHtmlData = () => {switch (level) {case 1:return <div>Level 1</div>case 2:return <div>Level 2</div>case 3:return <div>Level 3</div>default:return <div>Default</div>}}return (<LevelContext.Provider value={level + 1}>{getHtmlData()}{children}</LevelContext.Provider>)}function App() {return (<><Dg><Dg><Dg><Dg children={undefined} /></Dg></Dg></Dg></>)
}export default App

效果：