Inheritance 继承与创作中的道具

我有一个名为

Panel

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

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

我尝试过子分类，在父

面板中使用一个render方法，然后让子面板覆盖
renderBody
方法，该方法由
render
使用。这似乎是错误的，因为每个特定面板都需要自己的道具（如“标题”），当修改的道具传递给组件构造函数中的
super
时，React会抱怨（错误消息是，“调用super（）时……确保传递与组件构造函数相同的道具。”）。由于“标题”是特定于某种面板的，我不希望最终消费者必须指定“标题”道具本身

类面板扩展React.Component{
render（）{
返回(
{this.props.title}
{this.renderBody（）}
提交
)
}
}
类SomeSubPanel扩展面板{
建造师（道具）{
//React在以下行抛出错误消息
让newProps=Object.assign（{}，props，{title:“某个子面板”}）
超级（新道具）
}
renderBody（）{
返回（面板主体位于此处）
}
}

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

让子组件将特性传递给可重用父组件的“反应方式”是什么

非常感谢
 一定要用构图。一般来说，我认为您不应该扩展自己的React组件。以下是您可以实现此目标的方法：

class ReusablePanel extends React.Component {
  render () {
    return (
      <div>
        <div>{this.props.title}</div>
        <button onClick={this.props.onSubmit}>Submit</button>
        {this.props.children}
      </div>
    )
  }
}

class FootballPanel extends React.Component {
  handleSubmitButtonClick = () => {
    // do something
  }

  render () {
    return (
      <ReusablePanel title='Football' onSubmit={this.handleSubmitButtonClick}>
        <div>{/* Football markup */}</div>
      </ReusablePanel>
    )
  }
}

class ArsenalPanel extends React.Component {
  handleSubmitButtonClick = () => {
    // do something
  }

  render () {
    return (
      <ReusablePanel title='Arsenal' onSubmit={this.handleSubmitButtonClick}>
        <div>{/* Arsenal markup */}</div>
      </ReusablePanel>
    )
  }
}

类可重用面板扩展React.Component{
渲染（）{
返回(
{this.props.title}
提交
{this.props.children}
)
}
}
类FootballPanel扩展了React.Component{
handleSubmitButtonClick=（）=>{
//做点什么
}
渲染（）{
返回(
{/*足球标记*/}
)
}
}
类ArsenalPanel扩展React.Component{
handleSubmitButtonClick=（）=>{
//做点什么
}
渲染（）{
返回(
{/*阿森纳标记*/}
)
}
}
一定要使用构图。一般来说，我认为您不应该扩展自己的React组件。以下是您可以实现此目标的方法：

class ReusablePanel extends React.Component {
  render () {
    return (
      <div>
        <div>{this.props.title}</div>
        <button onClick={this.props.onSubmit}>Submit</button>
        {this.props.children}
      </div>
    )
  }
}

class FootballPanel extends React.Component {
  handleSubmitButtonClick = () => {
    // do something
  }

  render () {
    return (
      <ReusablePanel title='Football' onSubmit={this.handleSubmitButtonClick}>
        <div>{/* Football markup */}</div>
      </ReusablePanel>
    )
  }
}

class ArsenalPanel extends React.Component {
  handleSubmitButtonClick = () => {
    // do something
  }

  render () {
    return (
      <ReusablePanel title='Arsenal' onSubmit={this.handleSubmitButtonClick}>
        <div>{/* Arsenal markup */}</div>
      </ReusablePanel>
    )
  }
}

类可重用面板扩展React.Component{
渲染（）{
返回(
{this.props.title}
提交
{this.props.children}
)
}
}
类FootballPanel扩展了React.Component{
handleSubmitButtonClick=（）=>{
//做点什么
}
渲染（）{
返回(
{/*足球标记*/}
)
}
}
类ArsenalPanel扩展React.Component{
handleSubmitButtonClick=（）=>{
//做点什么
}
渲染（）{
返回(
{/*阿森纳标记*/}
)
}
}
我认为这样做的方法很简单：

// 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>

//为了简洁起见使用函数，但可以是类
let Panel=（{title，handleSubmit，children}）=>
{title}
{儿童}
提交

然后在其他地方：

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

{specificChildContent}
我认为这样做的方法很简单：

// 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>

//为了简洁起见使用函数，但可以是类
let Panel=（{title，handleSubmit，children}）=>
{title}
{儿童}
提交

然后在其他地方：

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

{specificChildContent}
您可以发布一些代码吗？子类的构造函数应该将道具传递给super，我不明白为什么仅从描述来看这就是一个问题。问题在于错误消息。子类希望通过添加“标题”来调整“道具”，但React不允许修改道具。我将尝试发布一些代码。我认为合成通常是首选的，特别是考虑到无状态react组件（在所有条件相同的情况下）通常被认为是首选的（对于preferred的一些定义）。关于代码的简要说明：在render中不能返回多个顶级元素。您需要将它们包装在父div中，或者返回它们的数组，并为每一个都提供一个唯一的keyAdjusted示例代码以使其更加正确。您可以发布一些代码吗？子类的构造函数应该将道具传递给super，我不明白为什么仅从描述来看这就是一个问题。问题在于错误消息。子类希望通过添加“标题”来调整“道具”，但React不允许修改道具。我将尝试发布一些代码。我认为合成通常是首选的，特别是考虑到无状态react组件（在所有条件相同的情况下）通常被认为是首选的（对于preferred的一些定义）。关于代码的简要说明：在render中不能返回多个顶级元素。您需要将它们包装在父div中，或者返回它们的数组，并为每一个都提供一个唯一的keyAdjusted示例代码以使其更加正确。为什么“您永远不应该扩展自己的React组件”？@MarioTacke我不知道“从不”。。。但是扩展组件是令人困惑的，依我看。按照组件本身的方式使用组件可以通过子类化而实现一切，而无需遵循额外的干扰和继承树。对这个问题给出的两个答案都是正确的，但这是第一个，并且遵循了问题给定的类范例。谢谢大家！为什么“你永远不应该扩展你自己的反应组件”？@MarioTacke我不知道“永远”。。。但是，在我看来，扩展组件是令人困惑的。按照组件本身的方式使用组件可以通过子类化实现您所做的一切