TA貢獻(xiàn)1921條經(jīng)驗(yàn) 獲得超9個(gè)贊
從概念上講，組件就像 JavaScript 函數(shù)。它們接受任意輸入（稱為props）并返回描述應(yīng)在屏幕上顯示的內(nèi)容的 React 元素。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
從 JavaScript 的角度來看，這只是一個(gè)函數(shù)，除了一個(gè)特殊的返回。它是 JSX，每個(gè) JSX 元素只是調(diào)用的語(yǔ)法糖React.createElement(component, props, ...children)。
基本上，您可以將上面示例中的 JSX 替換為：
React.createElement('h1', null, `Hello ${props.name}`);
這不過是一個(gè) JavaScript :)
然后你可以渲染你的組件：
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
你ReactDOM.render()用<Welcome name="Sara" />元素調(diào)用。
React 調(diào)用 Welcome 組件{name: 'Sara'}作為 props。
我們的 Welcome 組件返回一個(gè)<h1>Hello, Sara</h1>元素作為結(jié)果。
React DOM 有效地更新 DOM 以匹配<h1>Hello, Sara</h1>，并且您可以在屏幕上看到它。
React 功能組件有一個(gè)重要要求！
始終以大寫字母開頭組件名稱。
React 將以小寫字母開頭的組件視為 DOM 標(biāo)簽。例如，表示一個(gè) HTML div 標(biāo)簽，但表示一個(gè)組件，并且需要 Welcome 在范圍內(nèi)。
您示例中的此功能可用作功能組件：
function MyFun() { // name should start with a capital
return null;
}
React 不會(huì)顯示任何內(nèi)容，因?yàn)?a >如果組件返回 null，React 不會(huì)呈現(xiàn)。
舉報(bào)