重构复杂的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。

（编辑：核心网）

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