React FINAL FORM中的React JSX语法

Question

来自一个叫做React FINAL FORM的React库的例子，网址是https://final-form.org/docs/react-final-form/api/Field。我已经看到了一个例子，在render()函数中使用props属性。我想知道这是怎么可能的

<Field name="myField">
{props => (
<div>
<input {...props.input} />
</div>
)}
</Field>

Answer 1

这个模式叫做渲染道具。您可以在这里阅读更多内容:https://reactjs.org/docs/render-props.html

同时它是这样的:

const Field = (props) => {
//this is some data here
// in the end you pass the data to childern like a function
return props.children(/** HERE IS THE DATA YOU'RE GETTING FROM THAT PROPS WHICH CONFUSED YOU */)
}

<Field name="myField">
{//THE DATA YOU PASS TO ABOVE CHILDREN YOU GET IT HERE
props => (
<div>
<input {...props.input} />
</div>
)}
</Field>

Answer 2

这叫做渲染道具。你可以从这里了解更多

https://reactjs.org/docs/render-props.html