重组多个 renderComponent

Question

我有一个重构过滤器，需要渲染两个组件并将 props 从 redux 连接传递到第二个组件

然而，下面的代码从未呈现第二个 renderComponent - 这真是一种耻辱。有没有办法让下面的工作正常，或者我应该选择常规的 React 组件？

import { compose, renderComponent } from "recompose"
import { connect } from "react-redux"

import Filters from "./filter/filter"
import Wrestlers from "./container"

const defaultState = state => ({
  collection: state.roster,
})

export default compose(
  renderComponent(Filters),
  connect(defaultState),
  renderComponent(Wrestlers),
)(Wrestlers)

Answer 1

renderComponent 总是丢弃第二个参数（基本组件）并呈现第一个参数。如果你想渲染两者，只需创建一个新组件并渲染它们。可能是这样的：

const Parent = ({ collection }) => (
  // You can return an array here if you are using React 16
  <div>
    <Filters />
    <Wrestlers collection={collection} />
  <div>
)

export default connect(defaultState)(Parent)

重组多个 renderComponent

Recompose multiple renderComponent

reactjs

recompose