当多个孩子是内部 html 的一部分时，React createElement 不会添加字符串类型的孩子

Question

我正在使用 React.createElement(...) 使用 json 文件动态生成基本反应站点。

json 文件是代表元素（及其子元素）的 JSON 对象的数组。 单个元素的 JSON object 看起来像这样。

{
    "id": "e960f0ad-b2c5-4b0b-9ae0-0f6dd19ca27d",
    "render": true,
    "component": "small",
    "styles":[],
    "classes":[],
    "children": [
        "©2017",
        {
            "id": "04fa3b1a-2fdd-4e55-9492-870d681187a4",
            "render": true,
            "component": "strong",
            "styles":[],
            "classes":[],
            "children": [
                "Awesome Company"
            ]
        },
        ", All Rights Reserved"
    ]
}

这个 object“应该”理想地生成以下 html 代码

<small>©2017 <strong>Awesome Company</strong>, All Rights Reserved</small>

例如，我创建了反应组件来渲染这些 html 元素

小.jsx

import React from 'react'

const Small = ({ id, className, style, children }) => {
    return (
        <small id={id} style={style} className={className}>
            {children}
        </small>
    )
}

export default Small

同样，我为其他 html 元素（如锚标签、div、页脚、按钮等）创建了 jsx

App.js 调用 renderer.js 来渲染 json 文件中的每个组件

import React from 'react'
import Button from "../components/Button";
import Input from "../components/Input";
import Header from "../components/header/Header";
import Footer from "../components/footer/Footer";
import Div from "../components/containers/Div";
import Article from "../components/containers/article/Article";
import Fragment from "../components/containers/Fragment";
import Anchor from "../components/Anchor";
import Nav from "../components/Nav";
import Heading1 from "../components/typography/Heading1";
import Strong from "../components/typography/Strong";
import Small from "../components/typography/Small";

const componentMap = {
    button: Button,
    input: Input,
    header: Header,
    footer: Footer,
    div: Div,
    article: Article,
    fragment: Fragment,
    a: Anchor,
    nav: Nav,
    h1: Heading1,
    small: Small,
    strong: Strong
};

const generateComponentStyles = (styles) => {
    let mappedStyles = {};
    styles.forEach(style => {
        mappedStyles[style.name] = style.value;
    });
    return mappedStyles;
}

function renderer(config) {
    if (typeof componentMap[config.component] !== "undefined") {

        //creating children array for this element
        let elementChildren = [];
        if(config.children && config.children.length > 0) {
            for (let index = 0; index < config.children.length; index++) {
                const child = config.children[index];
                if(typeof config.children === "string") {
                    elementChildren.push(child);
                } else {
                    elementChildren.push(renderer(child));
                }
            }
        }

        return React.createElement(
            componentMap[config.component],
            {
                id: config.id,
                key: config.id,
                className: config.classes ? config.classes : null,
                style: config.styles ? generateComponentStyles(config.styles) : null
            },
            elementChildren
        );
    }
}
  
export default renderer;

问题是即使<small>标签是使用<strong>的内部 html 生成的，但它会跳过在 small 和 strong 标签中插入纯文本，因此元素显示为空。

这是网站上生成的

<small id="e960f0ad-b2c5-4b0b-9ae0-0f6dd19ca27d" class=""><strong id="04fa3b1a-2fdd-4e55-9492-870d681187a4" class=""></strong></small>

如您所见，它没有插入文本。

但是，如果我没有为“children”属性提供一个数组，而只是给出一个简单的字符串，那么它就会显示出来。 同样的事情也发生在锚标签上。

基于此链接： https://reactjs.org/docs/react-api.html#createelement createElement 将第三个参数作为子数组。

我什至试图将我的文本包装在一个空片段中以传递它，但它也不起作用。

当还有其他子项要插入时，如何在锚、小、强等的内部 html 中插入纯文本？

Answer 1

这可能是一个简单的，因为据我了解，它主要适用于字符串节点的豁免。

请检查条件：

typeof config.children === "string"

应该

typeof child === "string"