在 TS 环境，让列表渲染更简单：细说 TS + React 小项目

在 TS + React 的世界里，我们往往会遇到一些有趣的问题。其中之一便是如何为 antd 组件新增属性。

为了让 antd 组件支持自定义属性，我们需要对它进行简单的改造。

例如，我们可以为 Button 组件新增一个 size 属性，以方便我们控制按钮的大小。

import { Button } from 'antd';

type ButtonSize = 'small' | 'middle' | 'large';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: ButtonSize;
}

const MyButton = (props: ButtonProps) => {
  const { size, ...rest } = props;

  return <Button size={size} {...rest} />;
};

export default MyButton;

现在，我们就可以在项目中使用这个自定义的 Button 组件了。

import MyButton from './MyButton';

const App = () => {
  return (
    <div>
      <MyButton size="small">小按钮</MyButton>
      <MyButton size="middle">中按钮</MyButton>
      <MyButton size="large">大按钮</MyButton>
    </div>
  );
};

export default App;

接下来，我们来探讨一下如何通过兄弟组件间的通讯，以返回的 json 渲染列表数据。

在 React 中，我们可以使用 Context 来实现组件间的通讯。

import React, { createContext, useContext } from 'react';

const MyContext = createContext({});

const MyProvider = (props: any) => {
  const [data, setData] = React.useState([]);

  return (
    <MyContext.Provider value={{ data, setData }}>
      {props.children}
    </MyContext.Provider>
  );
};

const MyConsumer = () => {
  const { data } = useContext(MyContext);

  return (
    <ul>
      {data.map((item: any) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  return (
    <MyProvider>
      <MyConsumer />
    </MyProvider>
  );
};

export default App;

通过这种方式，我们可以将数据从父组件传递给子组件，并根据数据渲染列表。

最后，我们再来看看如何配置项目的路由。

在 React 中，我们可以使用 react-router 来配置路由。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => {
  return <h1>主页</h1>;
};

const About = () => {
  return <h1>关于页</h1>;
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

通过这种方式，我们可以配置项目的路由，并根据不同的路由渲染不同的组件。

希望这篇博文能够帮助你更好地理解 TS + React 中的一些常见问题和解决方案。如果你有任何问题，欢迎随时留言给我。