react学习记录Day2

Materal UI组件

1、Typography 文字铸排

使用文字铸排可以尽可能清晰、高效地展示您的设计和内容。

2、useTranslation

在React应用程序中，国际化（i18n）通常是通过使用专门的库来实现的，其中一个流行的库是react-i18next。这个库提供了useTranslation钩子，它允许你在组件中轻松地访问翻译功能。
以下是如何结合使用useTranslation钩子和t函数（通常t函数用于获取翻译文本，而不是t1，但为了与您的问题保持一致，我们将使用t1）来进行国际化的步骤：

• 安装和设置react-i18next：

首先，你需要安装react-i18next库，并设置i18n实例。
npm install react-i18next i18next

• 然后，在你的应用程序中设置i18next：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    // the translations
    // (tip move them in a JSON file and import them,
    // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
    resources: {
      en: {
        translation: {
          "welcome": "Welcome to our application"
        }
      },
      de: {
        translation: {
          "welcome": "Willkommen in unserer Anwendung"
        }
      }
    },
    lng: "en", // if you're using a language detector, do not define the lng option
    fallbackLng: "en",

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

• 使用useTranslation钩子：

在你的React组件中，你可以使用useTranslation钩子来获取t函数，该函数用于获取翻译文本。
以下是一个示例组件，它使用Typography组件和useTranslation钩子来显示国际化文本：

import React from 'react';
import { useTranslation } from 'react-i18next';
import Typography from '@material-ui/core/Typography';
function WelcomeComponent() {
  const { t1 } = useTranslation(); // 使用t1代替默认的t函数
  return (
    <Typography variant="h1" gutterBottom>
      {t1('welcome')} {/* 使用t1函数来获取翻译文本 */}
    </Typography>
  );
}
export default WelcomeComponent;

在这个例子中，WelcomeComponent组件使用useTranslation钩子来获取t1函数，然后使用t1函数来获取键为welcome的翻译文本。Typography组件用于显示这个文本，并且使用了variant="h1"属性来指定文本的样式。
 

如果你需要在 useTranslation() 钩子中传递命名空间，你可以使用 useTranslation 的命名空间参数：

const { t } = useTranslation('myNamespace');

在这个例子中，'myNamespace' 是一个命名空间，t 函数将从这个命名空间中查找翻译键。

3、interface

约束组件参数、显示用户列表、调用服务端API

https://juejin.cn/post/7006604966475350047

补充：带二元运算符的interface
 

interface Props {
  list?: { label?: string; value?: string }[] | null;
}

• list?：表示 list 是一个可选属性，这意味着你不一定要为组件传递 list 属性。
• { label?: string; value?: string }[]：这表示 list 可以是一个数组，数组中的每个元素都是一个对象，这个对象可以具有可选的 label 和 value 属性，这两个属性都是字符串类型。
• | null：这表示 list 属性除了可以是一个对象数组之外，还可以是 null

范例：

import React from 'react';

interface Props {
  list?: { label?: string; value?: string }[] | null;
}

const MyComponent: React.FC<Props> = ({ list }) => {
  return (
    <div>
      {list?.map((item, index) => (
        <div key={index}>
          <span>{item.label}: </span>
          <span>{item.value}</span>
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

React.FC<Props>的意思是：

• 这是一个React的函数组件（FunctionComponent）。
• 这个组件的属性类型由Props接口定义。

4、<Stack sx={{ mt: 2 }} />

sx：这是一个样式属性，它接受一个对象，该对象定义了要应用于组件的样式规则。

5、条件渲染

三目运算符

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride 的行李清单</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="宇航服" 
        />
        <Item 
          isPacked={true} 
          name="带金箔的头盔" 
        />
        <Item 
          isPacked={false} 
          name="Tam 的照片" 
        />
      </ul>
    </section>
  );
}

逻辑与运算符

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

6、Hook-useState

• 为组件添加状态

在组件的顶层调用 useState 来声明一个或多个 状态变量。

import { useState } from 'react';

function MyComponent() {

const [age, setAge] = useState(42);

const [name, setName] = useState('Taylor');

// ...

按照惯例使用 数组解构 来命名状态变量，例如 [something, setSomething]。

useState 返回一个只包含两个项的数组：

1. 该状态变量 当前的 state，最初设置为你提供的 初始化 state。
2. set 函数，它允许你在响应交互时将 state 更改为任何其他值。

要更新屏幕上的内容，请使用新状态调用 set 函数：

function handleClick() {

setName('Robin');

}

React 会存储新状态，使用新值重新渲染组件，并更新 UI。

• 根据先前的state更新state

setAge(age + 1);no

setAge(a => a + 1);yes

向 setAge 传递一个 更新函数，而不是下一个状态：

• 更新状态中的对象和数组