Как я могу написать этот компонент класса, чтобы реагировать функциональный компонент.?

Question

Я пытаюсь написать свой компонент, чтобы реагировать на функции, но я не могу отформатировать его должным образом, и мои классы и стили не обращали на это внимания, как правильно преобразовать этот компонент. Мой весь другой код в функции, и я также хочу, чтобы это был функциональный компонент

Мой компонент

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Tab from './Tab';

class Tabs extends Component {
  static propTypes = {
    children: PropTypes.instanceOf(Array).isRequired,
  }

  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.children[0].props.label,
    };
  }

  onClickTabItem = (tab) => {
    this.setState({ activeTab: tab });
  }

  render() {
    const {
      onClickTabItem,
      props: {
        children,
      },
      state: {
        activeTab,
      }
    } = this;

    return (
      <div className="tabs">
        <ol className="tab-list">
          {children.map((child) => {
            const { label } = child.props;

            return (
              <Tab
                activeTab={activeTab}
                key={label}
                label={label}
                onClick={onClickTabItem}
              />
            );
          })}
        </ol>
        <div className="tab-content">
          {children.map((child) => {
            if (child.props.label !== activeTab) return undefined;
            return child.props.children;
          })}
        </div>
      </div>
    );
  }
}

export default Tabs;

Answer 1

Итак, вы хотите удалить render и constructor, поскольку они не являются render и constructor в функциональном компоненте, и следующее, что вы хотите сделать, это использовать хук useState для поддержания Переменные состояния. Кроме того, вы можете извлечь children из props, переданного компонентам, и для свойств c для функции stati *1012* вы объявляете их в самой функции, поэтому вместо static propTypes вы будете использовать Tabs.propTypes

        import React from "react";
        import PropTypes from "prop-types";

        import Tab from "./Tab";

        const Tabs = props => {


          const { children } = props;

          const [state, setState] = useState({
            activeTab: props.children[0].props.label
          });

          const onClickTabItem = tab => {
            setState({ activeTab: tab });
          };

          return (
            <div className='tabs'>
              <ol className='tab-list'>
                {children.map(child => {
                  const { label } = child.props;

                  return (
                    <Tab
                      activeTab={state.activeTab}
                      key={label}
                      label={label}
                      onClick={()=>onClickTabItem()}
                    />
                  );
                })}
              </ol>
              <div className='tab-content'>
                {children.map(child => {
                  if (child.props.label !== activeTab) return undefined;
                  return child.props.children;
                })}
              </div>
            </div>
          );
        };
   //Static Props
     Tabs.propTypes = {
        children: PropTypes.instanceOf(Array).isRequired
      };


    export default Tabs;

Answer 2

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import Tab from './Tab';

export default function Tabs ({ children }){
  const [activeTab, setActiveTab] = useState(children[0].props.label);

  function onClickTabItem(tab){
    setActiveTab({ activeTab: tab });
  }

  return (
    <div className="tabs">
      <ol className="tab-list">
        {children.map((child) => {
          const { label } = child.props;

          return (
            <Tab
              activeTab={activeTab}
              key={label}
              label={label}
              onClick={onClickTabItem}
            />
          );
        })}
      </ol>
      <div className="tab-content">
        {children.map((child) => {
          if (child.props.label !== activeTab) return undefined;
          return child.props.children;
        })}
      </div>
    </div>
  );
};

Tabs.propTypes = {
  children: PropTypes.node.isRequired
}