當多個孩子是內部 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"