- 为了使得组件的可定制性更强,在使用组件的时候,可以在标签上加属性来传入配置参数。
组件引用时添加自定义属性,都会被react收集为组件的props对象的键值对
<LikeButton likedText='已赞' unlikedText='赞' />
组件内通过this.props.xxx
引用即可
const likedText = this.props.likedText;
const unlikedText = this.props.unlikedText;
- 组件可以在内部通过 this.props 获取到配置参数,组件可以根据 props 的不同来确定自己的显示形态,达到可配置的效果。
- 可以通过给组件添加类属性 defaultProps 来配置默认参数。
- props 一旦传入,你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props,从而达到更新的效果。
- 任何类型的数据均可作为组件的参数,包括字符串、数字、对象、数组、甚至是函数等等。
(1).. 例如现在我们把一个对象传给点赞组件作为参数:
<LikeButton wordings={{likedText: '已赞', unlikedText: '赞'}} />
(2).. 把一个函数作为组件参数:
<LikeButton
wordings={{likedText: '已赞', unlikedText: '赞'}}
onClick={() => console.log('Click on like button!')}/>
而且这种将自定义函数作为参数传递给组件的做法相当于给组件绑定了事件。
网友评论