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

效果

相关推荐
彤银浦38 分钟前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆43 分钟前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding1 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆1 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20181 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean2 小时前
React之旅-05 List Key
前端·javascript·react.js
亮学长2 小时前
lodash不支持 Tree Shaking 而 lodash-es可以
大数据·前端·elasticsearch
rzl022 小时前
HTML/JOSN复习总结
前端·html