代码之家 › 专栏 › 技术社区 › Jayffe

呈现内部的JSX语法箭头函数

reactjs javascript

Jayffe · 技术社区 · 6 年前

我刚看到这个密码 this other question 我不明白它是如何运作的:

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

我理解这样的事情:

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

但从未见过 {foo => <Bar bar={bar} />} 在渲染之前,

有人能帮我理解吗?

1 回复 | 直到 6 年前

Tholle 6 年前

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>