React组件显示[object Object]而非JSX的问题求助

你的代码里有两个核心问题导致了[object Object]的出现：

1. JSX元素被强制转为字符串：map函数返回的数组中混合了字符串（比如${item} ）和JSX元素（<code>...</code>），随后你用newText.join('')把数组转为字符串。JSX本质是React元素对象，当对象被转为字符串时就会显示[object Object]。
2. 错误处理contentEditable的输入值：直接使用ref.current.innerHTML获取内容会引入HTML标签干扰，且后续把处理后的内容转成字符串再设置回contentEditable，完全浪费了React渲染JSX的能力。

1. 修改处理函数，保留React元素数组 #

不要把处理后的结果转成字符串，直接返回包含字符串和JSX元素的数组，让React负责渲染：

import React from "react"

export default function HandleMonospace(inputText){
    if(!inputText) return [];
    // 用正则分割空白字符，避免多个空格导致的空元素
    const arrayText = inputText.split(/\s+/);
    return arrayText.map((item, index) => {
        if(/"[^"]+"/.test(item)){
            // 去除首尾引号
            const modItem = item.slice(1, -1);
            // 用React.Fragment包裹，避免额外元素，同时添加空格
            return (
                <React.Fragment key={index}>
                    <code>{modItem}</code>
                    {' '}
                </React.Fragment>
            );
        }
        return `${item} `;
    });
}

2. 调整组件的状态管理与渲染逻辑 #

• 用状态存储处理后的React元素数组，而不是字符串
• 获取contentEditable的输入时使用textContent而非innerHTML，避免HTML干扰
• 直接在contentEditable中渲染状态数组

示例组件代码：

import React, { useState, useRef } from "react";
import HandleMonospace from "./HandleMonospace";

export default function EditableText() {
    const [content, setContent] = useState([]);
    const editableRef = useRef(null);

    const handleInput = () => {
        const inputText = editableRef.current?.textContent || '';
        const processedContent = HandleMonospace(inputText);
        setContent(processedContent);
    };

    return (
        <div
            ref={editableRef}
            contentEditable
            onInput={handleInput}
            dangerouslySetInnerHTML={{ __html: '' }} // 清空初始HTML
        >
            {content}
        </div>
    );
}

关键注意点 #

• 给map返回的元素添加唯一key，这里用index是临时方案，实际项目建议用更稳定的标识
• 使用textContent获取输入内容，避免innerHTML带来的HTML标签污染
• 不要用join('')处理包含JSX的数组，React可以直接渲染元素数组

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