Javascript React-从json以友好方式呈现组件

我尝试从JSON呈现组件，如下所示：

const element = [
  {
    "component" : "container",
    "children" : [
      {
        "component" : "text",
        "content" : "foo"
      },
      {
        "component" : "text",
        "content" : "bar"
      },
    ] 
  }
]

代码非常简单，但我不明白为什么容器显示为空

const allComponents = {
    text: (p) => {return <p>text</p>;},
    container: (p) => {return <div className='container'>{p.children}</div>;} 
};

function decoder(element) {
    const el = element.component;
    if (typeof allComponents[el] !== "undefined") {
        const Comp = allComponents[el];
        console.log('Decoding: ' + el);
      return (
        <Comp>
            {element.children && (
                element.children.map(child => {decoder(child)}) 
            )}
        </Comp>
      )
    }
  }
export default decoder;

const allComponents={
text：（p）=>{returntext
；}，
容器：（p）=>{return{p.children}；}
};
功能解码器（元件）{
const el=element.component；
if（所有组件的类型[el]！=“未定义”）{
常数Comp=所有组件[el]；
console.log（'解码：'+el）；
返回(
{element.children&&(
element.children.map（child=>{decoder（child）}）
)}
)
}
}
导出默认解码器；

---

容器返回为空，如果我记录

p.children

则输出为未定义对象的数组。有什么想法吗？

您的

解码器必须像
反应组件一样使用，因此：


它应该以
大写字母
开头，即：
解码器
它应该总是
返回某物
：将
返回null
像else一样添加到未定义的检查中
当
映射到子对象时
，您必须返回一些内容（实际上您只是在执行解码器功能而没有返回）

总结：

function Decoder({ element }) {
  const el = element.component;
  if (typeof allComponents[el] !== "undefined") {
    const Comp = allComponents[el];
    console.log("Decoding: " + el);
    return (
      <Comp>
        {element.children &&
          element.children.map(child => <Decoder element={child} />)}
      </Comp>
    );
  }
  return null;
}

函数解码器（{element}）{
const el=element.component；
if（所有组件的类型[el]！=“未定义”）{
常数Comp=所有组件[el]；
控制台日志（“解码：+el”）；
返回(
{element.children&&
element.children.map（child=>）}
);
}
返回null；
}

PS：你需要一把内部解码器的钥匙

这是一个

编辑

要显示文本内容，您需要文本组件支持它，然后将其作为道具传递给Comp渲染，如沙盒中所示。
您的
解码器必须像
react组件一样使用，因此：


它应该以
大写字母
开头，即：
解码器
它应该总是
返回某物
：将
返回null
像else一样添加到未定义的检查中
当
映射到子对象时
，您必须返回一些内容（实际上您只是在执行解码器功能而没有返回）

总结：

function Decoder({ element }) {
  const el = element.component;
  if (typeof allComponents[el] !== "undefined") {
    const Comp = allComponents[el];
    console.log("Decoding: " + el);
    return (
      <Comp>
        {element.children &&
          element.children.map(child => <Decoder element={child} />)}
      </Comp>
    );
  }
  return null;
}

函数解码器（{element}）{
const el=element.component；
if（所有组件的类型[el]！=“未定义”）{
常数Comp=所有组件[el]；
控制台日志（“解码：+el”）；
返回(
{element.children&&
element.children.map（child=>）}
);
}
返回null；
}

PS：你需要一把内部解码器的钥匙

这是一个

编辑

要显示文本内容，您需要文本组件支持它，然后将其作为道具传递给Comp渲染，如沙盒中所示。
您如何使用解码器？您如何使用解码器？非常感谢！我正在学习反应，真的不知道如何解决这个问题。谢谢你的回答；）多谢各位！我正在学习反应，真的不知道如何解决这个问题。谢谢你的回答；）