Reactjs 组件的React动态模板

考虑以下组件：

ItemsDisplay

具有业务逻辑，

List

和

Table

只是具有相同界面的可视化

class ItemsDisplay扩展组件{
componentDidMount（）{
fetch（）.then（items=>this.setState（{items}））
}
删除（项目）{
//从状态中删除项目
}
render（）{
归还这个。道具。孩子们
}
}

const List=（{items，onRemove}）=>(

{items.map（item=>
{item}
）}

)

const表=（{items，onRemove}）=>(
{items.map（item=>(
{item}
))}
)

如何将

ItemsDisplay

与我的两种不同可视化一起使用？有这样的模式吗？或者我需要创建一个

ItemsDisplayList

和另一个

ItemsDisplayTable

const itemsdisplaylist=（{items，onRemove，list}）=>{
如果（列表）{
返回(

{items.map（item=>
{item}
）}
）；
}否则{
返回(
{items.map（item=>(
{item}
))}
);
}
}

然后：

或

---

您可以将其作为更高阶的组件，如下所示：

const itemsDisplayFactory = (BaseComponent) => {
  return class ItemsDisplay extends Component {
    componentDidMount() {
        fetch().then(items => this.setState({ items }))
    }

    remove(item) {
        // remove item from state
    }

    render() {
      return (
        <BaseComponent
          items={this.state.items}
          onRemove={this.remove}
          // anything else that you need to pass down
          {...this.props}
        />
      )
    }
  }
}

const itemsDisplayFactory=（基本组件）=>{
返回类ItemsDisplay扩展组件{
componentDidMount（）{
fetch（）.then（items=>this.setState（{items}））
}
删除（项目）{
//从状态中删除项目
}
render（）{
返回(
)
}
}
}

那你就可以了

class List extends Component {
render(){
   <ul>
    {items.map(item => <li onClick={() => onRemove(item)}>{item}</li>)}
   </ul>
  }
}


class Table extends Component {
    render(){
       <table>
          {items.map(item => (
            <tr onClick={() => onRemove(item)}>
            <td>{item}</td>
            </tr>
          ))}
        </table>
      }
    }

类列表扩展组件{
render（）{

{items.map（item=>
onRemove（item）}>{item}
）}

}
}
类表扩展组件{
render（）{
{items.map（item=>(
onRemove（项目）}>
{item}
))}
}
}

然后像这样组合起来

const ItemsDisplayList = itemsDisplayFactory(List);
const ItemsDisplayTable = itemsDisplayFactory(Table);

<ItemsDisplayList />
<ItemsDisplayTable />

const ItemsDisplayList=ItemsDisplayList工厂（列表）；
const ItemsDisplayTable=itemsDisplayFactory（表）；

这不回答ItemDisplayList如何获取项目和onRemove。我不想对视图进行调节，我希望它足够通用，我可以创建一个新的可视化，而不需要添加另一个if语句

const itemsDisplayFactory = (BaseComponent) => {
  return class ItemsDisplay extends Component {
    componentDidMount() {
        fetch().then(items => this.setState({ items }))
    }

    remove(item) {
        // remove item from state
    }

    render() {
      return (
        <BaseComponent
          items={this.state.items}
          onRemove={this.remove}
          // anything else that you need to pass down
          {...this.props}
        />
      )
    }
  }
}

class List extends Component {
render(){
   <ul>
    {items.map(item => <li onClick={() => onRemove(item)}>{item}</li>)}
   </ul>
  }
}


class Table extends Component {
    render(){
       <table>
          {items.map(item => (
            <tr onClick={() => onRemove(item)}>
            <td>{item}</td>
            </tr>
          ))}
        </table>
      }
    }

const ItemsDisplayList = itemsDisplayFactory(List);
const ItemsDisplayTable = itemsDisplayFactory(Table);

<ItemsDisplayList />
<ItemsDisplayTable />