我现在正在学习反应。
我在理解代码这一部分的内容时遇到了一些困难
const Link = ({ active, children, onClick }) => { if (active) { return <span>{children}</span> } return ( <a href="#" onClick={e => { e.preventDefault() onClick() }} > {children} </a> ) } Link.propTypes = { active: PropTypes.bool.isRequired, children: PropTypes.node.isRequired, onClick: PropTypes.func.isRequired }
我最难以理解此片段
return ( <a href="#" onClick={e => { e.preventDefault() onClick() }} > {children} </a> ) }
{children}在这里是什么意思?它有什么作用?
这是做什么的?
children: PropTypes.node.isRequired,
上一行中的节点是什么意思?
当您使用自定义组件时,例如
<MyComponent>Hello World</MyComponent>
无论您在标签之间写的是什么(在上面的示例中为Hello World)都作为childrenprop 传递给组件。
children
所以当写你的组件像
const Link = ({ active, children, onClick }) => {
你是解构的道具和只得到active,children并onClick从道具传递到组件
active
onClick
考虑例如,您将Link组件称为
Link
<Link active="true" onClick={someFunc} style={{color: 'orange'}}>Hello</Link>
然后,在所有道具中,即active, onClick, style, children,您将只active, onClick,children在组件中访问。
active, onClick, style, children
active, onClick,children
对于第二个问题:
子代:PropTypes.node.isRequired,
因此,这PropTypes是对传递给组件的道具执行typeCheck的方法。它是从react-proptypes包中导入的。
PropTypes
react-proptypes
所以
children: PropTypes.node.isRequired
使道具children成为必需。因此,如果您将组件渲染为
<Link />
它不会通过类型检查,因此您需要做
<Link>Text</Link>