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