我对学习react 很困惑.
export default function Foo(){
return(
<div>
<div>some text</div>
</div>
)
}
我想添加一个子组件:
export default function Foo(){
const Bar = ()=>{
return (
<input placeholder="some input"/>
)
}
return(
<div>
<div>some text</div>
</div>
)
}
据我所知，我可以用两种方式使用这个组件:
1. Use as function
return(
<div>
<div>some text</div>
{Bar()}
</div>
)
2. use as component:
return(
<div>
<div>some text</div>
<Bar/>
</div>
)
这两者到底有什么不同？我认为这是一样的，直到我遇到输入字段的问题，如果我使用组件作为<Bar/>，The focus on input field will be lost after I enter first letter
此处演示:https://codesandbox.io/s/gifted-archimedes-l7bce7?file=/src/App.js
那么这里的确切问题是什么？我一直将代码作为组件，根据我的理解，<Bar/>返回102时与Bar()相同
我说得对不对？
编辑:我发现了这个博客，它非常接近这个问题，也很棒:)