首页 > 代码库 > React 组件复合
React 组件复合
React组件复合
· 通过React写组件时，应当尽可能地将组件分为更小的更多的组件，然后再复合组件。
比如下面的评论组件就是一个组件，一个庞大的组件，这时我们还没有将之分解，更没有复合：
function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} /> <div className="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> );}
这个组件要接受一个author(对象)、一个text（字符串）和一个data(data对象)作为props。
因为这样的复杂嵌套关系导致如果我们需要修改这个组件变得非常棘手，并且在这种情况下，我们很难能够重用其中的小的组件，因此，这时候我们就需要将这个大的组件分解为几个小的组件，这样对于大的app，我们的工作就会变得越来越容易。
我们将之分解如下：
function formatDate(date) { return date.toLocaleDateString();}function Avatar(props) { return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> );}function UserInfo(props) { return ( <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> );}function Comment(props) { return ( <div className="Comment"> <UserInfo user={props.author} /> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> );}const comment = { date: new Date(), text: ‘I hope you enjoy learning React!‘, author: { name: ‘Hello Kitty‘, avatarUrl: ‘http://placekitten.com/g/64/64‘ }};ReactDOM.render( <Comment date={comment.date} text={comment.text} author={comment.author} />, document.getElementById(‘root‘));
这样，我们就把一个大的组件分解成了几个小的组件并且组合起来，这样更有利于代码的重用以及后期的维护。
React 组件复合
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。