013 在JSX中插入JavaScript表达式

在本节中，你将学习如何在 JSX 中使用大括号语法插入 JavaScript 表达式。这是构建动态、可交互 React 组件的基础且关键技能。我们将依次介绍如何在 JSX 中插入字符串、变量、函数调用以及对象属性，帮助你真正实现由数据驱动的响应式用户界面。

在JSX中使用 JavaScript变量插入字符串

为了让组件具备动态显示数据的能力，我们可以在组件内部定义 JavaScript 变量，将字符串赋值给变量。例如在下面的代码示例中，声明一个字符串变量username并赋值为字符串“dbuke”。这种方式体现了 React 组件由数据驱动的核心思想。代码示例如下：

const App = () => {
    const userName = "dbuke";
    return (
        <>
            <h1>hello world！</h1>
            <p>学习React!</p>
            <p>欢迎，{userName}！</p>
        </>
    )
};

export default App;

如上面代码所示，我们在JSX内部使用一对大括号{ }将包裹username变量。大括号是 JSX 的特殊语法，用于标识内部内容为JavaScript表达式，React 会自动解析并渲染其结果。通过这种方式，我们可以轻松将 JavaScript 变量嵌入JSX并输出到界面中。

在JSX中调用函数

除了直接使用变量，我们还可以在组件中定义函数，用于处理逻辑或拼接字符串。例如在下面的代码中，定义一个greetUser函数，接收用户姓名作为参数，并返回一段问候文本。代码如下所示：

const App = () => {
    const userName = "dbuke";
    const greetUser = (name) => {
        return `欢迎，${name}！`;
    }
    return (
        <>
            <h1>hello world！</h1>
            <p>学习React!</p>
            <p>欢迎，{greetUser(userName)}！</p>
        </>
    )
};

export default App;

在JSX中插入函数同样需要使用大括号包裹函数名。在上面的代码中，我们创建了我们可以直接在大括号内执行的函数greetUser，并将变量userName作为参数传入。React 会执行该函数，并将返回值渲染到界面中。

通过这种插入函数的方式，我们可以在渲染过程中执行任意逻辑，极大增强了组件的灵活性。

在JSX中使用对象与属性访问

在实际开发中，通常使用对象来管理和存储数据，因此我们同样可以在组件中插入对象。例如下面的代码声明了一个userInfo对象，包含age和location等属性。

const App = () => {
    const userInfo = {
        name: 'dbuke',
        age: 25,
    }
    return (
        <>
            <h1>hello world！</h1>
            <p>学习React!</p>
            <p>姓名：{userInfo.name}！</p>
            <p>年龄：{userInfo.age}！</p>
        </>
    )
};
export default App;

在JSX中渲染对象时，不能直接将对象放入大括号中，因为React不能直接渲染对象。正确的做法是通过点语法访问对象的具体属性，并将属性值放入大括号中渲染。这种方式适合处理结构化数据，让界面与复杂数据模型保持清晰对应。

在 JSX 中使用内联样式

我们可以在JSX中使用style属性直接设置内联样式，样式以 JavaScript 对象的形式定义。例如下面的示例代码中，我们可以声明一个titleStyle对象，包含颜色、字体大小、对齐方式与外边距等样式属性。

const App = () => {
    const userInfo = {
        name: 'dbuke',
        age: 25,
    }
  const titleStyle={
        color:"red",
        fontSize:"20px",
        fontWeight:"bold",
        textAlign:"center",
        margin:"20px 0"
    }
    return (
        <div style={titleStyle}>
            <h1>hello world！</h1>
            <p>学习React!</p>
            <p>姓名：{userInfo.name}！</p>
            <p>年龄：{userInfo.age}！</p>
        </div>
    )
};

export default App;

需要注意的是，JSX中的CSS属性名必须使用驼峰命名法，例如fontSize、textAlign，以符合JavaScript的语法规范。这个示例中，我们将样式对象titleStyle通过style属性传递给对应元素即可。这里同样需要使用大括号，告诉 JSX 这是一个 JavaScript 对象而非字符串。关于样式，我们会在下一章节中详细讲解。

通过本节课的学习，你已掌握JSX最核心的语法——利用大括号 { }插入任意JavaScript表达式，能够在JSX中渲染变量与字符串、调用函数并展示其返回值、安全访问并渲染对象属性，同时可使用对象形式的内联样式。掌握这一核心技能后，你将具备编写动态、数据驱动且可维护的React组件的能力，也为后续学习状态管理、事件处理、条件渲染与列表渲染等进阶内容奠定了坚实基础。