JSX语法箭头函数内部渲染

Question

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

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

我理解这样的事情：

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

但之前从未在渲染中看到{foo => <Bar bar={bar} />} ，

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

Answer 1

一个组件可以访问给予其与子元素children的道具。 如果函数是作为子函数给出的，则组件可以调用此函数。 调用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>