react hooks原生实现类似antd Radio (工作笔记)

挺简单的，看代码就好了

index.tsx

import RadioGroup from './RadioGroup';
import RadioItem from './Radio';

const Radio: any = RadioItem;

Radio.Group = RadioGroup;

export default Radio;

radioGroup.tsx

import React, { useCallback } from 'react';
import './index.scss';


const RadioGroup = ({ title, children, active, onChange }: any) => {
  const handleActiveChange = useCallback(
    (value: string) => {
      onChange(value);
    },
    [onChange]
  );

  return (
    <div className={'radio-group'}>
      <h3>{title}</h3>
      <div className={'radio'}>
        {React.Children.map(children, (child) => {
          const isActive = active === child.props.value;
          return React.cloneElement(child, {
            label: child.props.children,
            value: child.props.value,
            active: isActive,
            onClick: handleActiveChange
          });
        })}
      </div>
    </div>
  );
};

export default RadioGroup;

radio.tsx

import React from 'react';
import './index.scss';

const Radio = ({ onClick, value, label, active }: any) => {
  return (
    <div
      className={`radio-wrap ${active ? 'active' : ''}`}
      onClick={() => onClick(value)}
    >
      <div>{label}</div>
    </div>
  );
};

export default Radio;