用钩子创建React功能组件，然后将其发布在NPM软件包中

Question

我尝试创建自己的NPM包。 我创建并发布了我的组件，它正在工作，但是当我在组件中添加使用效果时，我会有错误。 什么是去吗？

import React, { FC, useEffect, useState  } from 'react';
import './Button.scss';

export interface ButtonProps {
  children: any;
  styles?: Array<string>;
}

const Button: FC<ButtonProps> = (
  {
    children,
    styles,
    ...props
  }) => {

  const [active, setActive] = useState(null);
  const root_styles = ['pef_button'];
  
  useEffect(()=>{
    console.log('JK:DAHJS:JDKHA:SKJhd');
    
  },[])

  if(styles){
    for (let i = 0; i < styles.length; i++){
      root_styles.push(styles[i]);
    }
  }
    
  return(
    <button {...props} className={root_styles.join(' ')} >
      {children}
    </button>
  );
};

export default Button;

我确实在应用程序中导入此组件，并且有错误

import React, {useContext, useState, useEffect} from 'react';

import {Button, Input} from 'My[![enter image description here][1]][1]-react-library'

const MainPage: React.FunctionComponent = () => {


  return (
    <div>
      <div>
        <Button   >
          zxc
        </Button>
      </div>
    </div>
  );
};
    
export default MainPage;

，也许我应该使用组件类代替功能组件

Answer 1

您用什么打包？使用汇总时，我遇到了同样的问题。我通过在lollup.config.js中添加React和React-Dom将其添加到外部来解决。

export default {
    ...,
    external: [
        'react',
        'react-dom',
    ]
}