javascript - jsx函数中怎么渲染组件？

Question

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能正常渲染renderComDom却渲染不出来？

Answer 1

应该是你的 Com 组件return了空标签，然后你下意识觉得渲染没对。

Answer 2

您的 renderComDom 函数没有返回任何内容。在 JSX 中，每个渲染的函数必须返回一个有效的 DOM 元素或者另一个渲染函数。如果没有返回任何东西，React 将无法渲染这个组件。

将 renderComDom 函数修改为返回一个有效的 DOM 元素应该能解决这个问题。例如：

const renderComDom = () => {    return <Com />}

这个函数返回了 <Com />，一个有效的 React 组件。当这个函数被调用时，React 将渲染这个组件并添加到 DOM 中。

请检查你是否正确地导入并使用了 Com 组件，如果 Com 组件本身没有问题，那么这个修改应该可以解决你的问题。