从JSON动态渲染React组件时子组件不显示的问题排查

你的代码逻辑其实已经正确生成了TextField的React元素，但App组件没有渲染它接收到的子节点，这就是子组件不显示的核心问题。

看你的App组件的render方法：

render() {
  return <h2>In App</h2>;
}

React组件不会自动渲染传入的子节点，你必须显式地在组件的JSX中包含this.props.children，才能让子组件显示出来——你的App组件完全没用到这个属性，所以生成好的TextField根本没地方挂载。

修改后的App组件代码 #

import React from "react";
export default class App extends React.Component {
  constructor() {
    super();
  }
  componentWillMount() {}
  render() {
    return (
      <div>
        <h2>In App</h2>
        {/* 显式渲染传入的子组件 */}
        {this.props.children}
      </div>
    );
  }
}

另外还有个小优化建议：在getFromJson方法里，当没有children时，返回null比空字符串''更符合React对元素的预期，避免潜在的渲染问题：

let children = obj.children ? obj.children.map((obj) => {
  return this.getFromJson(obj,obj.baseType);
}) : null;

修改完成后，App组件就会正确渲染内部的TextField子组件，最终页面会显示：

In App
Hi from textfield

内容的提问来源于stack exchange，提问作者learner