DEV Community
·
条件渲染 - React 文档
💡
原文约200字/词，阅读约需1分钟。
📝
内容提要
在React中，条件渲染根据条件动态显示或隐藏元素，可以通过三元运算符、布尔表达式、提前返回或逻辑判断来实现。
🎯
关键要点
- 在React中，条件渲染允许根据条件动态显示或隐藏元素。
- 可以使用三元运算符、布尔表达式、提前返回或逻辑判断来实现条件渲染。
- 三元运算符示例：{isLoggedIn ? <LogoutButton /> : <LoginButton />}
- 布尔表达式示例：{isNew && <p>Bienvenido/a</p>}
- 提前返回示例：if (!isLoggedIn) return <LoginScreen />;
- 使用变量保存要渲染的内容示例：let contenido; if (error) { contenido = <Error />; } else { contenido = <Dashboard />; } return <div>{contenido}</div>;
❓
延伸问答
什么是条件渲染？
条件渲染是根据条件动态显示或隐藏元素的技术。
在React中如何实现条件渲染？
可以通过三元运算符、布尔表达式、提前返回或逻辑判断来实现条件渲染。
能给我一个三元运算符的条件渲染示例吗？
示例：{isLoggedIn ? <LogoutButton /> : <LoginButton />}
什么情况下使用提前返回进行条件渲染？
当某个条件不满足时，可以使用提前返回来避免渲染不必要的内容，例如：if (!isLoggedIn) return <LoginScreen />。
如何使用布尔表达式进行条件渲染？
可以使用布尔表达式，例如：{isNew && <p>Bienvenido/a</p>}，只有当isNew为真时才会渲染该元素。
如何在变量中保存要渲染的内容？
可以使用变量保存内容，例如：let contenido; if (error) { contenido = <Error />; } else { contenido = <Dashboard />; } return <div>{contenido}</div>;
➡️
