《React 知识点》第一篇 大括号使用{}

简介

大括号 " {} "可以用于包裹JavaScript的表达式或语句。以便在jsx中动态生成内容。

插入变量与表达式

javascript 复制代码
function expressionTest() {
  const name = "变量测试";
  return (
    <p>
      <div>{name}</div>
      <div>表达式 2+10= {2 + 100}</div>
    </p>
  );
}

函数调用

javascript 复制代码
function funcListTest() {
  const list = [
    "Vite 是一个通用的去中心化应用平台",
    "Vite 采用 DAG 账本结构,账本中的交易按账户分组",
    "模块之间的依赖关系的解析由浏览器实现",
  ];
  return (
    <ul>
      {list.map((ele, i) => (
        <li key={i}> {ele} </li>
      ))}
    </ul>
  );
}

使用对象

javascript 复制代码
function objectTest() {
  const styleObject = {
    color: "blue",
    fontSize: "16px",
    fontWeight: "bold",
  };
  return <p style={styleObject}>styled Text</p>;
}

条件语句

javascript 复制代码
function conditionStatementTest(isLoggedIn: boolean) {
  return <div>{isLoggedIn ? <p>welcome react</p> : <p>please log in</p>}</div>;
}

全部代码

javascript 复制代码
// import { useState } from "react";

function funcListTest() {
  const list = [
    "Vite 是一个通用的去中心化应用平台",
    "Vite 采用 DAG 账本结构,账本中的交易按账户分组",
    "模块之间的依赖关系的解析由浏览器实现",
  ];
  return (
    <div>
      <ul>
        {list.map((ele, i) => (
          <li key={i}> {ele} </li>
        ))}
      </ul>
      <ol>
        {list.map((ele, i) => (
          <li key={i}> {ele} </li>
        ))}
      </ol>
    </div>
  );
}

function variableAndExpressionTest() {
  const name = "变量测试";
  return (
    <section>
      <div>{name}</div>
      <div>表达式 2+10= {2 + 100}</div>
    </section>
  );
}
function objectTest() {
  const styleObject = {
    color: "blue",
    fontSize: "16px",
    fontWeight: "bold",
  };
  return <p style={styleObject}>styled Text</p>;
}
function conditionStatementTest(isLoggedIn: boolean) {
  return <div>{isLoggedIn ? <p>welcome react</p> : <p>please log in</p>}</div>;
}
function App() {
  return (
    <div>
      <section>
        {variableAndExpressionTest()}
        {objectTest()}
        {funcListTest()}
        {conditionStatementTest(false)}
      </section>
    </div>
  );
}

export default App;

效果

相关推荐
NeverSettle_几秒前
2025前端网络相关知识深度解析
前端·javascript·http
JarvanMo1 分钟前
Flutter. Draggable 和 DragTarget
前端
堕落年代3 分钟前
小红书JS SDK签名过程
开发语言·javascript·ecmascript
练习时长一年7 分钟前
后端接口防止XSS漏洞攻击
前端·xss
muchu_CSDN8 分钟前
谷粒商城项目-P16快速开发-人人开源搭建后台管理系统
前端·javascript·vue.js
Bye丶L10 分钟前
AI帮我写代码
前端·ai编程
薛定谔的算法13 分钟前
JavaScript队列实现详解:从基础到性能优化
javascript·数据结构·算法
Sui_Network14 分钟前
GraphQL RPC 与通用索引器公测介绍:为 Sui 带来更强大的数据层
javascript·人工智能·后端·rpc·去中心化·区块链·graphql
PuddingSama15 分钟前
Android 高级绘制技巧: BlendMode
android·前端·面试
Cache技术分享18 分钟前
186. Java 模式匹配 - Java 21 新特性:Record Pattern(记录模式匹配)
前端·javascript·后端