1、為DOM組件設置Props

在react中jsx中的標簽屬性被稱為Props

DOM組件的類屬性，為了防止與js中的class屬性沖突改成了className

DOM組件的style屬性

import image from "./logo.svg";
function App() {const imgStyleObj = {width: 200,height: 200,};return (<div><img src={image} alt="" className="" style={imgStyleObj} /></div>);
}export default App;

JSX的展開語法

import image from "./logo.svg";
function App() {const imgData = {className: "small",style: {width: 200,height: 200,},};return (<div><img src={image} alt="" {...imgData} /></div>);
}export default App;

效果是一樣的

2、為React組件設置Props

操作步驟：

1、請求功能所需的數據（例如文章信息）

2、創建Article組件

3、將文章的數據分別傳遞給Article

在react組件中展開Props的使用場景

function Detail() {return (<><p>{content}</p><p>狀態：{active ? "顯示中" : "已隱藏"}</p></>);
}
function Article({ title, content, active }) {return (<><h3>{title}</h3><Detail /></>);
}
function App() {const articleData = {title: "標題1",detailData: {content: "內容1",active: true,},};return (<><Article {...articleData} /></>);
}export default App;

3、將JSX作為Props傳遞（組件插槽）

function List({ children, title, footer = <div>默認底部內容</div> }) {return (<><h2>{title}</h2><ul>{children}</ul>{footer}</>);
}function App() {return (<><List title="列表1" footer={<p>這是底部內容1</p>}><li>列表項1</li><li>列表項2</li><li>列表項3</li></List><List title="列表2" footer={<p>這是底部內容2</p>}><li>列表項A</li><li>列表項B</li><li>列表項C</li></List><List title="列表3"><li>列表項X</li><li>列表項Y</li><li>列表項Z</li></List></>);
}export default App;

4、子組件向父組件傳值

import { useState } from "react";
function Detail({ onActive }) {const [status, setStatus] = useState(false);function handleClick() {setStatus(!status);onActive(status);}return (<div><button onClick={handleClick}>按鈕</button><p style={{ display: status ? "block" : "none" }}>Detail的內容</p></div>);
}function App() {function handleActive(status) {console.log(status);}return (<><Detail onActive={handleActive} /></>);
}export default App;

5、使用Context進行多級組件傳值

import { createContext, useContext } from "react";
function Section({ children }) {const level = useContext(LevelContext);return (<><section className="section"><LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider></section></>);
}
function Heading({ level, children }) {switch (level) {case 1:return <h1>{children}</h1>;case 2:return <h2>{children}</h2>;case 3:return <h3>{children}</h3>;case 4:return <h4>{children}</h4>;case 5:return <h5>{children}</h5>;case 6:return <h6>{children}</h6>;default:throw new Error("未知的level" + level);}
}
const LevelContext = createContext(0);
function App() {return (<div><Section><Heading level={1}>主標題</Heading><Section><Heading level={2}>副標題</Heading><Heading level={2}>副標題</Heading><Heading level={2}>副標題</Heading><Section><Heading level={3}>子標題</Heading><Heading level={3}>子標題</Heading><Heading level={3}>子標題</Heading><Section><Heading level={4}>子標題</Heading><Heading level={4}>子標題</Heading><Heading level={4}>子標題</Heading></Section></Section></Section></Section></div>);
}export default App;