如何使用React.createElement创建带子元素的React组件实例？

你的写法存在两处核心错误，调整后即可实现预期效果：

• 错误1：自定义Element组件未接收、渲染children属性，你通过React.createElement传入的子元素都会被直接丢弃，不会渲染到组件内部。
• 错误2：React JSX中指定元素类名需使用className属性，你写的class不会被React识别为CSS类属性，渲染后不会出现对应类名。

调整步骤 #

1. 修改自定义组件代码 #

const Element = (props) => {
    return (
        // 替换class为className，插入props.children渲染传入的子元素
        <div className='element'>{props.children}</div>
    );
}

export default Element;

你也可以用解构写法简化参数：

const Element = ({ children }) => {
    return <div className='element'>{children}</div>;
}

2. 调整调用写法（可选优化） #

你原本的数组传子元素的写法可以正常运行，但需要给每个数组内的子元素加上唯一key属性，避免React抛出遍历子元素无key的警告；也可以直接把子元素作为剩余参数传入，不需要包裹数组，写法更简洁：

// 推荐写法：剩余参数传子元素，无需包裹数组
React.createElement(Element, {}, 
    React.createElement('span', { className: 'text' }, 'text 1'),
    React.createElement('span', { className: 'text' }, 'text 2')
)

// 兼容数组写法：必须补全key属性
React.createElement(Element, {}, [
    React.createElement('span', { className: 'text', key: 'text1' }, 'text 1'),
    React.createElement('span', { className: 'text', key: 'text2' }, 'text 2')
])

调整后最终渲染结果和你期望的完全一致。

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