我如何编写此类组件来响应功能组件。？

Question

Iam trying to write my component to react function but i cant format it properly and my classes and styles dosent apllied on it what is the proper way to convert this component. My all other code is in a fuctions and i also want this to be a functional component

My Component

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

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
}

Answer 2

So what you wanna do is remove the render and the constructor since their is no render and constructor in functional component and the next thing you wanna do is use the useState hook to maintain the state variables.Furthermore , you could pull out children from the props passed to the components and for static properties on a function you declare them on the function itself so instead of using static propTypes you would use 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;