Question

我有一个名为Panel的React类，我希望将其作为UI中各种特定面板的可重用组件。每个面板都有一个标题栏和一个“提交”按钮，但每种面板的主体都是独一无二的。

我可以使用继承（子类）或组合来实现这一点，但在这种情况下哪个最好？

我尝试过子类化，在父Panel中使用了渲染方法，然后让子面板覆盖{{1}}使用的renderBody方法。这似乎打破了，因为每个特定的面板都需要自己的道具（例如“标题”），并且当组件构造函数中将修改的道具传递给render时，React会抱怨（错误信息是，“当调用超级时）（）...确保传递组件构造函数传递的相同道具。“）。由于“标题”特定于某种面板，我不希望最终消费者必须自己指定“标题”道具。

super

使用合成似乎不像子类一样整洁，因为每个面板只需要一个特定的主体，但是主体（HTML）不能在组件之间传递。

具有可以将特征传递给可重用父组件的子组件的“反应方法”是什么？

非常感谢！

Answer 1

我认为React的做法只是：

// using a function for brevity, but could be a class
let Panel = ({ title, handleSubmit, children }) =>
  <div>
    <h1>{title}</h1>
    {children}
    <button onClick={handleSubmit}>Submit</button>
  </div>

然后在其他地方：

<Panel title="Foo" handleSubmit={onSubmit}>{specificChildContent}</Panel>

Answer 2

绝对使用构图。一般来说，我认为您不应该扩展自己的React组件。以下是如何实现目标的：

$ head example.txt                     
pass
pass
fah
pass

继承和组合中的道具

2 个答案: