《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;

效果

相关推荐
王小明max2 分钟前
Metis UI:下一代 React 组件库,重新定义前端开发体验
react.js
Rasir3 分钟前
第四章:模块化设计与错误处理
前端
Xy9108 分钟前
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
前端
前端的日常8 分钟前
前端如何优化音频和视频的加载性能?
前端
是晓晓吖10 分钟前
在Next.js中,ISR是如何工作的?(译文)
前端
FogLetter10 分钟前
智能前端之拍照识别单词(下):AI集成与交互优化
前端·aigc·openai
yvvvy10 分钟前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript
满分观察网友z10 分钟前
告别平庸!我用 picker-view 造的这两个选择器,让产品经理闭嘴了
前端
一头小鹿16 分钟前
Vue 和 React中的状态管理机制
vue.js·react.js
jqq66617 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js