React中能否在组件内部复用自身组件？

当然允许！这种在组件内部调用自身的写法叫做递归组件，非常适合处理树形结构（比如嵌套菜单、层级列表）的数据，正好匹配你代码里的嵌套fl数据场景~

不过你的代码里有几个小问题，导致它可能无法正常工作，我来帮你梳理并修正：

你的代码存在的问题： #

• feladatok是一个箭头函数，但在render里你直接写了{this.feladatok}，没有执行这个函数，应该改为{this.feladatok()}
• map回调里用了大括号，但没有显式返回组件，导致没有生成子元素（要么去掉大括号让箭头函数自动返回，要么加上return）
• 缺少递归终止条件：如果fl.fl不存在或者为空时，应该停止渲染子组件，避免不必要的执行
• 组件props没有做边界处理，当某些属性未传递时可能会报错

修正后的完整代码： #

import React from 'react';

class Feladatlista extends React.Component {
  constructor(props) {
    super(props);
  }

  feladatok = () => {
    // 先判断嵌套的fl是否存在且有内容，作为递归终止条件
    if (this.props.fl && this.props.fl.length) {
      return this.props.fl.map((fl, index) => {
        // 递归调用自身，注意给每个子元素加唯一key（用index是临时方案，最好用数据里的唯一id）
        return (
          <Feladatlista
            key={index}
            tipus={fl.tipus}
            nev={fl.nev}
            rang={fl.rang}
            fl={fl.fl}
          />
        );
      });
    }
    // 没有子元素时返回null，终止递归
    return null;
  };

  render() {
    // 给props加默认值，避免未传递时报错
    const { tipus = '', nev = '', rang = '' } = this.props;
    
    return (
      <div>
        <div className={tipus}>
          <p>{nev}</p>
          <p>{rang}</p>
        </div>
        <div className='gyerek'>
          {/* 执行feladatok函数，渲染子组件 */}
          {this.feladatok()}
        </div>
      </div>
    );
  }
}

export default Feladatlista;

递归组件的关键注意事项： #

• 必须有明确的终止条件：比如上面代码里的if (this.props.fl && this.props.fl.length)，当嵌套数据为空或不存在时返回null，否则会触发无限递归，导致React抛出最大渲染深度的错误
• 子元素必须加唯一key：React列表渲染要求每个子元素有唯一key，帮助React高效更新DOM
• 边界处理：给props设置默认值，避免未传递属性时出现undefined的报错

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