React 正在渲染 [object object] 而不是 UI 中的 JSX

Question

我的 React 代码正在渲染 [object object] 而不是 UI 中的 JSX，

我的代码 -

const renderIntended = (column, data, type, row) => {
            let value = data;
            const treeHtml = `<div class="tree-link" style='font-size: 14px; cursor: pointer; color: #565659;'>
                Click More + ${treeSideBar(value)}
             </div>`;

            if (isNull(data)) {
                value = "-";
            } else if (row.op != "replace") {
                const parsable = isParsable(data);
                if (parsable) {
                    // value = "{ ; }";
                    value = treeHtml;
                }
            }
            return `${value}`;
        };

        const treeSideBar = (value) => {
            return <div><TreeSideBar treeData={value}/></div>
            // return value;
        }

我有一个 renderIntended 函数，它可以在某些显示中呈现表格列数据和格式。 但我面临的是如果我返回 treeHtml 没有它显示文本的组件但是当它包含它时显示 Click More + [object Object]

我无法在其中呈现

React 正在渲染 [object object] 而不是 UI 中的 JSX。请指导我。

PS：如果我在表格外显示我的

Answer 1

JSX 返回一个叫做渲染工厂的东西

所以这个

<div />

变成

React.createElement("div")

这反过来会给你一个object 和一些反应特定的道具。 这就是你看到 [object object] 的原因。

你不能像你试图做的那样简单地将 JSX 或 React 元素渲染成字符串。

您的选项可能会按照 React 渲染器中记录的方式进行渲染，或者使用 ReactDOM.renderToString 之类的东西