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

简介

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

插入变量与表达式

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

函数调用

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

使用对象

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

全部代码

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

效果