BackdraftJS组件的children是什么？与预期不符的技术问询

你之前的理解存在偏差，BackdraftJS里的children并非组件树顶层的任意内容，它有明确的限定：

• BackdraftJS的children特指组件实例化时，作为参数传入的直接子元素/组件集合，范围仅限传递给当前组件的子内容，而非整个组件树里的任意节点。
• 和部分前端框架不同，BackdraftJS不会自动渲染传入的children——必须在组件的render方法中显式引用{this.props.children}，这些子内容才会出现在最终的DOM结构里，这是很多人产生误解的核心原因。
• 举个实际代码例子：

  // 定义一个Backdraft组件
  class MyComponent extends bd.Component {
    render() {
      // 这里没有引用this.props.children，传入的子内容不会被渲染
      return bd.dom.div({}, "父组件固定内容");
    }
  }
  
  // 实例化时传入子内容
  bd.dom(MyComponent, {}, "子文本内容", bd.dom.span({}, "子元素"));
  

  上面的代码里，即便实例化时传入了子文本和span元素，因为组件的render方法没主动渲染this.props.children，这些子内容不会出现在最终页面中。
• 另外，BackdraftJS的children支持多种类型：普通文本、Backdraft组件实例、原生DOM元素，甚至是能返回这些类型的函数，但都需要组件主动调用渲染。

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