javascript - 渲染中的 JSX 语法箭头函数

Question

我刚刚在 this other 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>