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>