在 JSX 函數(shù)中如何正確渲染組件？

React JSX 函數(shù)組件渲染問(wèn)題排查

在使用 React 的 JSX 函數(shù)組件時(shí)，正確渲染其他組件有時(shí)會(huì)遇到一些問(wèn)題。本文將分析一個(gè)常見(jiàn)的案例，并提供解決方案。

以下代碼片段展示了一個(gè)開(kāi)發(fā)者遇到的問(wèn)題：

import React from 'react'; import Com from './com';  const Text = () => {     const renderDom = () => {         return <div>222222</div>;     };      const renderComDom = () => {         return <Com />; // 注意這里     };      return (         <div>             {renderDom()}             {renderComDom()}         </div>     ); };  export default Text;

renderDom 函數(shù)能夠正常渲染，而 renderComDom 函數(shù)卻無(wú)法正確渲染 Com 組件。這通常是因?yàn)?Com 組件本身的實(shí)現(xiàn)問(wèn)題。

問(wèn)題根源及解決方法：

最常見(jiàn)的原因是 Com 組件返回了一個(gè)空 JSX 元素，例如：

// 錯(cuò)誤的 Com 組件實(shí)現(xiàn) const Com = () => {}; // 或 return NULL; 或 return undefined;

雖然代碼沒(méi)有報(bào)錯(cuò)，但空元素不會(huì)在頁(yè)面上顯示任何內(nèi)容，導(dǎo)致開(kāi)發(fā)者誤以為組件沒(méi)有渲染。

正確的 Com 組件實(shí)現(xiàn)應(yīng)該返回有效的 JSX 元素，例如：

// 正確的 Com 組件實(shí)現(xiàn) const Com = () => <div>Com 組件內(nèi)容</div>;

或者，如果 Com 組件需要根據(jù)狀態(tài)或 props 渲染不同的內(nèi)容，確保在所有情況下都返回一個(gè)有效的 JSX 元素，即使是條件渲染，也要考慮返回 null 或 undefined 的情況，并用空元素替代。例如：

const Com = ({showContent}) => {   return showContent ? <div>Com 組件內(nèi)容</div> : <div></div>; // 使用空div替代 };

通過(guò)檢查并修改 Com 組件的代碼，使其始終返回有效的 JSX 元素，就能解決 renderComDom 函數(shù)無(wú)法正確渲染的問(wèn)題。 記住，JSX 函數(shù)組件必須返回一個(gè)單一的根元素。