Javascript 一个反冲组件是否可以包含另一个反冲组件？

好的，假设我有一个组件

Box

class Box extends Component {
  bdElements() {
    return e.div(
      {style: border: "1px solid black"},
    );
  }
}

还有另一个

Jack

class Jack extends Component {
  bdElements() {
    return e.h1(
      'hello my name is Jack'
    );
  }
}

有没有一种方法可以创建一个将插孔放入盒中的组件

class JackInBox extends Component {
  bdElements() {
    ????
  }
}

---

我认为这是不可能的，是吗？

您可以将自定义组件作为子级进行传递，就像传递普通元素一样。例如

e("div",
  e("p", "Hello World!")
)

在您的代码中，

e.div（…）

是

e（“div”，…）

的快捷方式。您可以向您的自定义组件传递数据，而不是

“div”

const{e，Component}=bd；
类框扩展组件{
b元素（）{
返回e.div(
{样式：{边框：“1px纯黑”}
);
}
}
类Jack扩展组件{
b元素（）{
返回e.h1(
“你好，我叫杰克”
);
}
}
类扩展组件{
b元素（）{
//自定义组件不能用作根，因此请使用div包装器
返回e.div(
e（框，
e（杰克）
)
);
}
}
bd.render（JackInBox，“根”）
可以通过几种方法实现。使用哪种方法取决于组件的目标

op问题“是否有一种方法可以创建一个将Jack放入框中的组件”后面是一个代码剪报，它通过子类化
组件来创建这样一个组件。大概op的问题是“有没有办法将已经定义的
Box
和
Jack
组件组合起来，创建第三种组件，即
JackInBox
。这是一个精心设计的模糊组合示例（）.一个同时是盒子和插孔的类在逻辑上没有意义。另一种方法是通过包含插孔组件的盒子组件创建“插孔盒子”组件

虽然不是最优的，但让我们继续通过组合实现。杰克：

class Jack extends Component {
  bdElements() {
    return e.h1({}, 'hello my name is Jack');
  }
}

接下来，让我们定义一个通用的Box。为了用作基类，Box应该有一个非空的公共API（否则，为什么从它开始派生？）

最后，让我们创建一个JackInBox类，它的行为完全像一个盒子，但里面有一个Jack


class JackInBox extends Box {
  bdElements() {
    return e.div({
      bdOn_click:e=>alert(this.someMethod()),
      style: 'border: 2px solid black;'
    }, e(Jack));
  }
}

当然，这是非常人为的，但是想象一下Box有一个广泛的公共api，然后简单地重写bdElements函数以在新组件中获得所有api可能是值得的

也就是说，我觉得上面的例子有点混乱，因为看起来你应该能够把东西放进一个盒子里。事实上，你可以，让我们再试一次，只使用原来的盒子而不制作新的类JackInBox。这是一个包含的例子，也就是说，下面的盒子包含一个Jack

let box = render(Box, {}, "root");

// insert Jack; if not explicitly stated, children or appended to the root node
box.insChild(Jack);

也许以后，我们需要定义要放入框中的其他内容。例如，吉尔：

class Jill extends Component {
  bdElements() {
    return e.h1({}, 'hello my name is Jill');
  }
}

把吉尔和杰克关在一起，希望他们这么多年后仍然喜欢对方

box.insChild(Jill);

一个更复杂的组件，包括一个用于插入子项的框；因此，我们必须告诉backdraft在何处插入所述子项：

class Box4 extends Component {
  bdElements() {
    return e.div(
      {style: 'border: 2px dashed red;'},
      e.p("the box below can contain any number of children"),
      e.div({
        style: 'border: 2px solid red;',
        bdAttach:'bdChildrenAttachPoint'
      })
    );
  }
}

let box4 = render(Box4, {}, "root");
box4.insChild(Jack);
box4.insChild(Jill);

所有这些例子都可以在现场看到

box.insChild(Jill);

class Box4 extends Component {
  bdElements() {
    return e.div(
      {style: 'border: 2px dashed red;'},
      e.p("the box below can contain any number of children"),
      e.div({
        style: 'border: 2px solid red;',
        bdAttach:'bdChildrenAttachPoint'
      })
    );
  }
}

let box4 = render(Box4, {}, "root");
box4.insChild(Jack);
box4.insChild(Jill);