[其他] 条件渲染

网络安全发布于：2021-08-06 11:43 | 阅读数：248 | 评论：0

1449 主题	0 回帖	1449 积分

网站编辑

积分: 1449

发消息

条件渲染
在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function UserGreeting(props) {
  return <h1>欢迎回来!</h1>;
}
function GuestGreeting(props) {
  return <h1>请先注册。</h1>;
}
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
  return <UserGreeting />;
  }
  return <GuestGreeting />;
}
ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('example')
);
</script>
</body>
</html>

免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群 QQ空间

返回列表

唐伯虎 LV4

1449 经验

1449 文档

[其他] 条件渲染

相关帖子

React Native 资源更新增量包的优化实践

PPT柱状图如何增加柱子

Android学习笔记——四大组件

HMS Core音频编辑服务音源分离与空间音频渲染，助力快速进入3D音频的世界

HarmonyOS应用开发：鸿蒙自定义组件slot插槽，体现的更强大！

net framework3.5怎么启动 win10启动net framework3.5方法

路由器初始密码大全-(路由器初始密码大全图片)

uniapp & vue 父子、子父、兄弟组件之间的传值

vue图片剪裁上传组件

react如何引入css

唐伯虎 LV4