重构伟大的React组件：编写高效且可读组件的5个优越实践

因此我们可以进一步重构这个组件，建设另一个小的函数组件来渲染按钮，并转达一些属性，如 action、setClicked 和 title：

import React, { useState } from 'react'; 
import './ListComponent.css'; 
const ListItemComponent = props => { 
 return { 
 <li> 
 <button 
 onClick={() => { 
 props.setClicked(props.title); 
 props.action(); 
 }} 
 className="my-button"> 
 {props.title} 
 </button> 
 </li> 
 ); 
}; 
const ListComponent = props => { 
 const [lastClickedButton, setLastClickedButton] = useState(''); 
 return 
 <div> 
 <hl>The last clicked button is {lastClickedButton}</hl> 
 <ul> 
 <ListItemcomponent 
 title="Create" 
 action={props.createSomething} 
 setClicked={setLastClickedButton} 
 /> 
 <ListItemComponent 
 title="Read" 
 action={props.readSomething} 
 setClicked={setLastClickedButton} 
 /> 
 <ListItemComponent 
 title="Update" 
 action={props.updateSomething} 
 seteClicked={setLastClickedButton} 
 /> 
 <ListItemComponent 
 title="Destroy" 
 action={props.destroySomething} 
 seteClicked={setLastClickedButton} 
 /> 
 </ul> 
 </div> 
 ); 
}; 

好的，我们的组件开始变悦目了，可是仍有改造的余地，让我们继承吧!

3. 正确定名和 props 解构

setLastClickedButton 是 setter 函数的描写性名称，但我们必要保持代码的可读性和简捷，因此请务必起一个最短、最精辟的名字，这是很重要的。我们将其重定名为 setClicked。

同样，只要有也许，从 props 工具解构出来你必要的对象就可以停止多次一再行使 props 这个词。在 ListItem 组件中，我们此刻按解构后的函数参数中的名称—— {action, title, setClicked}来会见 props。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!