React组件化条件渲染的实现
背景介绍
React通常搭配jsx使用，jsx把js和视图组合在一起，巧妙地把视图转换成了js模块。但经常写react的应该会看到过很多这样子的代码：
{
tabList.length > 2 ?
<TabBar
tabList={tabList}
tabIndex={tabIndex}
hasLoginBar={showLoginStatus}
tabChange={handleTabChange}
type={'sticky'}
colorTheme={colorTheme}
fontType={'fzlantingyuan'}
/> : ''
}
{
taskList.length || isPreview ?
<p className={styles.rulesText} onClick={() => clickRules()}>规则</p> : ''
}通过一个变量或者一个表达式，控制元素组件的显示和隐藏。从功能上看没什么问题，但从可读性上，却是可斟酌的。
- 过多的括号或者嵌套的括号，难以阅读
- js表达式和元素混合，不直观
这其实都是因为要使用js，增加了括号引起的，那有没有办法不适用括号呢？结合其他框架来看，方案有两种，一种是像Vue一样使用指令，一种是像Solid.js一样使用组件。
由于React 本身并没有内置类似于 Vue.js 自定义指令（v-directive）的功能，所以最理想的还是基于组件去实现。
Solid.js的Show组件
那我们先来看看Solid.js的Show组件。在Solid.js里Show属于控制流组件，其官方介绍如下：
Show 控制流用于有条件地渲染视图的一部分：当 when 为 true 时渲染 children，否则渲染 fallback。它类似于三元运算符（when ? children : fallback），但非常适合模板化 JSX。
import { Show } from "solid-js";
function Show<T>(props: {
when: T | undefined | null | false;
keyed: boolean;
fallback?: JSX.Element;
children: JSX.Element | ((item: T) => JSX.Element);
}): () => JSX.Element;使用方式如下：
<Show when={state.count > 0} fallback={<div>Loading...</div>}>
<div>My Content</div>
</Show>Show 也可以用作将块键控到特定 data model 的一种方式。例如，每当替换 user model 时，都会重新执行该方法。
<Show when={state.user} fallback={<div>Loading...</div>} keyed>
{(user) => <div>{user.firstName}</div>}
</Show>也可以将多个 Show 嵌套使用，用于处理多层级的条件判断。
<Show when={user}>
<Show when={user.isAdmin} fallback={<p>Welcome, regular user!</p>}>
<p>Welcome, admin user!</p>
</Show>
</Show>React的实现
那我们也来实现一个类似效果的组件。
interface ShowProps<T> {
when: T | undefined | null | false;
fallback?: React.ReactNode;
children: React.ReactNode | ((item: T) => React.ReactNode);
}
function Show({ when, fallback = null, children }) {
return when ? children : fallback;
}实现真的是很简单，那么我们来看看前面的例子改写后的形式
<Show when="tabList.length > 2" >
<TabBar
tabList={tabList}
tabIndex={tabIndex}
hasLoginBar={showLoginStatus}
tabChange={handleTabChange}
type={'sticky'}
colorTheme={colorTheme}
fontType={'fzlantingyuan'}
/>
</Show>
<Show when="taskList.length || isPreview" >
<p className={styles.rulesText} onClick={() => clickRules()}>规则</p>
</Show>的确是美观很多，我们也可以增加异步组件的支持
const AsyncShow = ({ when, fallback, children }) => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
Promise.resolve(when).then(result => {
setData(result);
setIsLoading(false);
});
}, [when]);
if (isLoading) return fallback;
return data ? children : null;
};
// Usage
<AsyncShow
when={fetchUserData()}
fallback={<Loading />}
>
{user => <UserProfile data={user} />}
</AsyncShow>结论
在 React 中，通过结合 JSX 和组件化设计，可以实现更加优雅的条件渲染。本文介绍了 Solid.js 的 Show 组件，并借鉴其理念，在 React 中实现了类似的 Show 组件，用于替代传统的三元表达式或逻辑运算符进行条件渲染。这样的实现不仅提升了代码的可读性，还使得 JSX 模板更加直观和简洁。
在日常开发中，倡导大家多学习其他框架的优势，不仅能开拓思维，还能优化现有技术栈的使用方式。多学习并不意味着抛弃当前的技术栈，而是通过吸收优点优化现有代码，甚至推动团队开发的规范升级。学习其他框架的思维方式可以帮助我们跳出惯性，提高对复杂场景的解决能力。
到此这篇关于React组件化条件渲染的实现的文章就介绍到这了,更多相关React组件化条件渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React Native 集成jpush-react-native的示例代码
这篇文章主要介绍了React Native 集成jpush-react-native的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了React反向代理及样式独立详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了react同构实践之实现自己的同构模板，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了React事件处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
本篇文章主要介绍了VSCode配置react开发环境的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了详解对于React结合Antd的Form组件实现登录功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
React可以通过使用React事件系统来监听鼠标事件,您可以在React组件中通过使用特定的事件处理函数来注册和处理鼠标事件,本文小编讲给大家详细介绍一下如何在React中监听鼠标事件,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了React之防止按钮多次点击事件 重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了useState第二个参数的"第二个参数",具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论