Question

感谢您抽出宝贵的时间阅读此书。

我是React的新手，我正在努力地动态渲染组件。从API接收的对象可以任意嵌套到x个级别，并且需要从BE接收需要注入的组件名称。

我从API得到的响应看起来像这样：

<section id="image" class="button">
  <button type="button">Add image</button>
  <input type="file" accept="image/*">
</section>

Answer 1

您将不得不处理不同类型的节点（至少是文本），但这只是沿着树（API响应）走一圈并根据它构建一个React节点树的问题：

因此，您的节点定义如下所示（这是伪语法，并非要包含在您的代码中）：

    node: {
        type: 'element' | 'text' => the type will be needed,
        name: string => a tag name (if it is a React element),
        children: node[]
    }

因此，您的api的实际响应可能是：

    {
        type: 'element',
        name: 'div',
        children: [
            {
                type: 'element',
                name: 'div',
                children: [
                    {
                        type: 'element',
                        name: 'h1',
                        children: [
                            { type: 'text', value: 'Title 1' }
                        ]
                    },
                    {
                        type: 'element',
                        name: 'p',
                        children: [
                            { type: 'text', value: 'This is a paragraph' }
                        ]
                    }
                ]
            },
            {
                type: 'element',
                name: 'nav',
                children: []
            }
        ]

    }

我们会将解析为对象的响应传递给generateTreeNode方法：

    /**
     * @param {object} apiResponse
     * @returns {ReactNode}
     */
    function generateTreeNode(apiResponse) {
        switch (apiResponse.type) {
            case 'element':
                return React.createElement(apiResponse.name, { children: apiResponse.children.map(child => generateTreeNode(child)) });
            case 'text':
                return apiResponse.value;
            default: // no default
        }
    }

请注意，递归调用将确保遍历整个apiResponse树。

就是这样。这未经测试，但应该可以很好地工作：generateTreeNode函数的返回可以用作render方法的返回值。

使用它应了解的主要资源是what is a React Node和creating a react node。

此外，随时（并且应该）扩展您的api响应结构并开始处理：

自定义组件（您必须以某种方式导入）
其他元素道具（例如样式或classNames）
等...

还请注意，这段代码假定响应的根是一个节点（请记住，React如何不允许您在渲染方法，数组和片段中一次返回多个节点，这就是为什么）

React-根据API响应渲染动态组件

1 个答案: