JSX语法箭头函数内部渲染

Question

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

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

我理解这样的事情:

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

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

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

Answer 1

组件可以访问通过childrenprop 赋予它的子元素。如果将函数作为子函数给出，则组件可以调用该函数。然后，调用该函数的组件children可以使用它认为合适的任何参数来调用该函数。

例子

const Child = props => {
  return props.children('test');
};

const Parent = () => (
  <Child>
    {function(arg1) {
      return <div> This is a {arg1} </div>;
    }}
  </Child>
);

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>