时间戳

首页 > 解决方案 > 渲染中的 JSX 语法箭头函数

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

问题描述

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

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

我理解这样的事情：

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

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

有人可以帮我理解吗？

标签： javascriptreactjs

解决方案

children组件可以通过prop访问给它的子元素。如果给定一个函数作为子函数，则组件可以调用此函数。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>

推荐阅读