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

简介

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

插入变量与表达式

function expressionTest() {
  const name = "变量测试";
  return (
    

      
{name}
      
表达式 2+10= {2 + 100}
    

  );
}

函数调用

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

      {list.map((ele, i) => (
        
 {ele} 
      ))}
    
  );
}

使用对象

function objectTest() {
  const styleObject = {
    color: "blue",
    fontSize: "16px",
    fontWeight: "bold",
  };
  return 
styled Text
;
}

条件语句

function conditionStatementTest(isLoggedIn: boolean) {
  return 
{isLoggedIn ? 
welcome react
 : 
please log in
}
;
}

全部代码

// import { useState } from "react";

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

      

        {list.map((ele, i) => (
          
 {ele} 
        ))}
      
      

        {list.map((ele, i) => (
          
 {ele} 
        ))}
      
    
  );
}

function variableAndExpressionTest() {
  const name = "变量测试";
  return (
    

      
{name}
      
表达式 2+10= {2 + 100}
    
  );
}
function objectTest() {
  const styleObject = {
    color: "blue",
    fontSize: "16px",
    fontWeight: "bold",
  };
  return 
styled Text
;
}
function conditionStatementTest(isLoggedIn: boolean) {
  return 
{isLoggedIn ? 
welcome react
 : 
please log in
}
;
}
function App() {
  return (
    

      

        {variableAndExpressionTest()}
        {objectTest()}
        {funcListTest()}
        {conditionStatementTest(false)}
      
    
  );
}

export default App;

效果