时间戳

首页 > 解决方案 > 如何将ant design类组件转换为功能组件

reactjs - 如何将ant design类组件转换为功能组件

问题描述

谁能建议我如何将 ant 设计类组件转换为基于函数的组件。我的应用程序几乎是一个基于函数的组件。我对基于函数的组件非常熟悉，但我不熟悉基于类的组件。任何人都可以提出一些将基于类的组件转换为基于函数的组件的想法。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Steps, Button, message } from 'antd';

const { Step } = Steps;

const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
    };
  }

  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  render() {
    const { current } = this.state;
    return (
      <>
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action">
          {current < steps.length - 1 && (
            <Button type="primary" onClick={() => this.next()}>
              Next
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" onClick={() => message.success('Processing complete!')}>
              Done
            </Button>
          )}
          {current > 0 && (
            <Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
              Previous
            </Button>
          )}
        </div>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

我是新手，对类组件不太熟悉。我很容易理解基于功能的组件。

标签： reactjsantd

解决方案

在您的情况下，这非常简单，因为您在本地状态中只有一个变量。您可以从 onClick 事件中的 useState 中删除函数并直接从 setCurrent 变量更新状态。

这将是我能想到的最简单的灵魂

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Steps, Button, message } from "antd";

const { Step } = Steps;

const steps = [
  {
    title: "First",
    content: "First-content"
  },
  {
    title: "Second",
    content: "Second-content"
  },
  {
    title: "Last",
    content: "Last-content"
  }
];

const App = () => {
  const [current, setCurrent] = useState(0);

  return (
    <>
      <Steps current={current}>
        {steps.map(item => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div className="steps-content">{steps[current].content}</div>
      <div className="steps-action">
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => setCurrent(curr => curr + 1)}>
            Next
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button
            type="primary"
            onClick={() => message.success("Processing complete!")}
          >
            Done
          </Button>
        )}
        {current > 0 && (
          <Button style={{ margin: "0 8px" }} onClick={() => setCurrent(curr => curr - 1)}>
            Previous
          </Button>
        )}
      </div>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

推荐阅读