一个筛选组件如下图：
筛选组件包含一个 button 和一个 form， button 能控制 form 的显示与隐藏。设计里 button 和 form 在一行，实现时理所当然地把这一行封装成了一个组件。
但在另一个项目里，设计有区别， button 被放到了面板的右上角，之前写的组件没法复用了。
看看之前封装的组件：
function FilterBar() {
const [showForm, setShowForm] = useState(true);
return (
setShowForm(pre => !pre)}
>
{showForm ? "<<< Filter" : "Filter >>>"}
{showForm && (
Name
IP
)}
);
}
它做了以下 4 件事：
- 创建
button， - 创建
form， - 实现
button和form的联动， - 创建容器
div.container, 对button和form布局。
「创建容器 div.container, 对 button 和 form 布局」这件事导致了组件没法在新项目里复用。
能不能写一个组件，不对子元素布局，把布局的工作交给组件使用者去做？
思路：把 div.container 去掉，把 button 和 form 的实例返回，组件变成了一个 hook。
function useFilterBar() {
const [showForm, setShowForm] = useState(true);
return [
setShowForm(pre => !pre)}
>
{showForm ? "<<< Filter" : "Filter >>>"}
,
showForm ? (
Name
IP
) : (
undefined
)
];
}
function App() {
const [filterBtn, filterForm] = useFilterBar();
return (
{filterBtn}
{filterForm}
Name
IP
...
);
}
class 组件没法用 hook 怎么办？
思路：使用高阶组件，高阶组件是函数组件，可以使用 hook，然后把 button 和 form 通过 props 传递给 class 组件。
const withFilterBar = Cmp => props => {
const [filterBtn, filterForm] = useFilterBar();
return (
);
};
我写这篇文章的目的不是为了记录技巧，而是希望对组件有新的思考：把「子元素关联关系 – 逻辑」和「子元素布局 – 视图」两件事拆开，让组件更灵活。
Original: https://www.cnblogs.com/apolis/p/12611249.html
Author: apolis
Title: 如何支持组件的子元素任意摆放
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/685807/
转载文章受原作者版权保护。转载请注明原作者出处！