在 React js 中嵌入表达式

在 React js 中，我们可以使用花括号 {} 嵌入 JavaScript 表达式。这允许我们在组件中动态地渲染数据。

基本语法

使用花括号 {} 来嵌入 JavaScript 表达式。例如：

function MyComponent(props) {
  const color = "blue";
  return <div>The color is: {color}</div>;
}

上述代码会渲染出：

The color is: blue

我们可以使用任何 JavaScript 的合法表达式来嵌入到花括号中。

访问 Props

在 React 组件中，我们可以通过 this.props 访问传入组件的属性。例如：

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

上述代码会渲染出：

Hello, John Doe!

其中，props.name 是通过组件属性传入的数据。

使用条件表达式

我们可以在花括号中使用条件表达式来动态地渲染不同的内容。例如：

function MyComponent(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

上述代码会根据 isLoggedIn 属性渲染不同的内容。

使用函数

我们可以在组件中定义一个 JavaScript 函数，并把函数的返回值作为嵌入到花括号中的表达式。例如：

function MyComponent(props) {
   function formatName(user) {
      return user.firstName + ' ' + user.lastName;
   }

   const user = {
      firstName: 'John',
      lastName: 'Doe'
   };

   return (
      <div>
         <p>Hello, {formatName(user)}!</p>
      </div>
   );
}

上述代码会渲染出：

Hello, John Doe!

其中，formatName 函数返回的字符串被插入到了 <p> 标签中。

使用对象属性

我们可以在组件中访问 JavaScript 对象的属性，并把属性值作为嵌入到花括号中的表达式。例如：

function MyComponent(props) {
   const user = {
      firstName: 'John',
      lastName: 'Doe'
   };

   return (
      <div>
         <p>First Name: {user.firstName}</p>
         <p>Last Name: {user.lastName}</p>
      </div>
   );
}

上述代码会渲染出：

First Name: John
Last Name: Doe

结论

在 React js 中，我们可以使用花括号 {} 嵌入 JavaScript 表达式，以实现动态渲染内容，访问 Props 和 JavaScript 对象属性，使用条件表达式和函数等。以上是在 React js 中嵌入表达式的基本语法和示例。