React中如何不通过children props向函数组件传递div/JSX内容

React本身支持将任意JSX节点作为普通props的值传递，不需要额外处理，按以下步骤实现即可：

1. 组件实现（TypeScript版本） #

import React, { type ReactNode } from 'react'

// Props类型定义
type CustomComponentProps = {
  props: {
    title: string
    // 核心：将需要接收JSX的字段声明为ReactNode类型，支持所有可渲染的React内容
    description: ReactNode
    // 可按需扩展其他字段
  }
}

const Component: React.FC<CustomComponentProps> = (inputProps) => {
  // 解构你传入的配置对象
  const { title, description } = inputProps.props
  return (
    <div className="component-container">
      <div className="title">{title}</div>
      {/* 直接渲染description字段即可，和渲染children的逻辑完全一致 */}
      <div className="description-area">{description}</div>
    </div>
  )
}

export default Component

2. 组件实现（JavaScript版本） #

import React from 'react'

const Component = (inputProps) => {
  const { title, description } = inputProps.props
  return (
    <div className="component-container">
      <div className="title">{title}</div>
      <div className="description-area">{description}</div>
    </div>
  )
}

export default Component

调用说明 #

你给出的调用方式可以直接正常运行：

<Component props={{ 
  title: "hello",
  description: 
    {
      <>Hello <h1>world</h1> </>
    }
}} />

扩展能力 #

如果需要向传入的JSX传递组件内部的状态，可以使用渲染函数模式：

• 调用时写法：

<Component props={{
  title: "hello",
  description: (count) => <>当前计数：{count}</>
}} />

• 组件内部渲染：

const Component = (inputProps) => {
  const [count, setCount] = useState(0)
  const { title, description } = inputProps.props
  return (
    <div className="component-container">
      <div className="title">{title}</div>
      <div className="description-area">
        {/* 调用渲染函数传入内部状态 */}
        {description(count)}
      </div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者sshmaxime