Question

我有以下组件是ag-Grid的包装器：

<div className="ag-theme-material" style={{height: "100%"}}>
    <AgGridReact
        pagination
        paginationPageSize={this.props.Size}
        columnDefs={this.props.Col}
        rowData={this.props.Row}
    />
</div>

我想创建一个单独的包装，但是没有分页功能。因此，我想要一个具有共同特征的基类，两个子代（有或没有分页）都可以从中继承。我知道继承在React中很少使用，所以我想知道如何使用组合来达到相同的效果。谢谢！

Answer 1

您可以使用复合组件模式，在该模式下，您可以为组件提供基本功能，而用户可以根据自己的喜好使用更多功能。

代码将是这样的：

import React, { Component } from 'react'
import ReactDom from 'react-dom'
class AgGridReact extends Component {

  static Paginator = (props list) => (...) // some jsx that represents the paginator
  render() {
    return <>
      /** your grid jsx code here **/

      // other features code
      React.Children.map(this.props.children, child =>
              React.cloneElement(child, {
        // props you need to pass for the components
      }),
    )
  }
    </>
  }


        // the usage of this component will be:

        <AgGridReact {...props}>
            // the user can git rid of this if without paginator
           <AgGridReact.Paginator /> 
        </AgGridReact>

在React中使用合成将组件拆分为基础和子级

1 个答案: