Reactjs 我该如何做redux'；s`connect（）`-在声明时将道具放在组件上？

当我这样做时：

function mapStateToProps(state, props) {
    return {
        contacts: buildClientContacts(state)
    }
 }

export default connect(mapStateToProps)(Contacts)

我最终导出了一个组件，比如

联系人

，除了

连接

为我将

联系人

道具放在上面（并使用redux的

状态

构建

联系人

道具）

我怎样才能做同样的事情——通过添加道具，在另一个组件的基础上声明一个组件

我想这样做的原因是我想在组件上放置一些与redux无关的道具，而不是代码中显示的mapToState

大概是这样的：

export default <Contacts mydata={somedata: data}>

function contactsWithData(WrappedComponent, data) {
  return class extends React.Component {
    render() {
      return <WrappedComponent mydata={data} {...this.props}/>
    }
  }
}
...
export default contactsWithData(Contacts, {somedata: true});

---

。。。但这确实滥用了redux:）

我认为您需要的是一个

高阶组件（HOC）

。请阅读更多有关此模式的信息。根据React文件：

。。。高阶分量是一个函数，它接受一个分量并 返回一个新组件

const EnhancedComponent = higherOrderComponent(WrappedComponent);

而组件将道具转换为UI，这是一个高阶组件 将一个组件转换为另一个组件

const EnhancedComponent = higherOrderComponent(WrappedComponent);

实际上，redux

connect

也返回HOC

因此，您可以创建一个

HOC

，将所需数据设置为

Contacts

组件的属性。在您的情况下，它将如下所示：

export default <Contacts mydata={somedata: data}>

function contactsWithData(WrappedComponent, data) {
  return class extends React.Component {
    render() {
      return <WrappedComponent mydata={data} {...this.props}/>
    }
  }
}
...
export default contactsWithData(Contacts, {somedata: true});

功能联系人SwithData（WrappedComponent，数据）{
返回类扩展了React.Component{
render（）{
返回
}
}
}
...
导出默认contactsWithData（Contacts，{somedata:true}）；