小编Jay*_*ffe的帖子

我刚刚在另一个问题中看到了这段代码,我不明白它是如何工作的:

let Parent = () => (
  <ApiSubscribe>
    {api => <Child api={api} />}
  </ApiSubscribe>
)

我理解这样的事情:

let Parent = ({api}) => (
  <ApiSubscribe>
    <Child api={api} />
  </ApiSubscribe>
)

但从未{foo => <Bar bar={bar} />}在渲染中看过,

有人能帮助我理解这个吗？

我只是尝试使用带有反应的简单 HOC。这是功能：

import React from "react"

const withOptions = (WrappedComponent) => {

  return class extends React.Component {

    render() {
      return <WrappedComponent { ...this.props } />
    }
  }

}

export default withOptions

问题似乎出在我导出/导入它的方式上。

以简单的方式导入和使用，它的工作原理：

import withOptions from "./Options"
...

class BilanClimatique extends React.Component{
  ...
}
const StyledBilanClimatique = withStyles(styles)(BilanClimatique)
export default withOptions(StyledBilanClimatique)

但是如果我使用像 index.js 这样的中间文件

import withOptions from "./Options"

export {
  withOptions
}

并像这样将其导入到我的组件中

import {
  withOptions
} from "./index"

这是我得到的

有人可以帮助我理解这一点吗？

编辑 ：

我发现使用 HOC 的组件是从与 HOC 相同的文件中导入的：

import withOptions …