小编zah*_*ani的帖子

我正在使用 Tailwind 构建一个简单的 React 应用程序。我用过create-react-app然后安装了tailwind。我以前已经做过很多次了。

为了安装 Tailwind，我还必须安装craco并更改package.json “scripts” 以使用craco，如下所示：

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

然而，这一次，当我运行时npm start，我遇到了一个以前从未遇到过的错误：

Error: error:0308010C:digital envelope routines::unsupported

所以我在StackOverflow上搜索，有人建议添加--openssl-legacy-provider到我的“开始”脚本中，如下所示：

"scripts": {
    "start": "craco --openssl-legacy-provider start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

现在正在发挥作用。但有人可以向我解释一下它--openssl-legacy-provider到底是什么以及它是如何工作的吗？

我有 React、Typescript、svgr。一切看起来都很好。

{\n  test: /\\.svg$/,\n  use: ['@svgr/webpack'],\n},\n

import Logo from 'assets/icons/logo.svg';\n

<Logo className={iconClassName} />;\n

TS不喜欢。

\n

TS2322：类型 '{ 类名：字符串；}' 不可分配给类型\n'IntrinsicAttributes'。\xc2\xa0\xc2\xa0 类型\n'IntrinsicAttributes' 上不存在属性'className'。

\n

我该怎么办？

谢谢！

PS 有趣！当我导入时{ReactComponent as Logo}- 我不再有错误。

我有一些重复的悬停状态，运行一个函数来显示一些空或填充的图标（就像您在一些带有空/填充购物车的电子商务网站中看到的那样）。作为实践，我想创建并将其放入自定义的hoverHooks组件中，并useRef运行useEffect一些add/remove事件监听器，如下所示：

const ref = useRef(null)
function enter() {
  setHover(true)
}
function leave() {
  setHover(false)
}

useEffect(() => {
  ref.current.addEventListener('mouseenter',enter)
  ref.current.addEventListener('mouseleave', leave)
 return () => {
   ref.current.removeEventListener('mouseenter',enter)
   ref.current.removeEventListener('mouseleave',leave)
}
})

我这样做是为了让保存我的图标的容器可以拥有 ，而ref={ref}无需我重复编写onMouseEnter / onMouseLeave. （我猜我的参考文献正在重复，但最好是三个字母，并将我的悬停移动state到一个地方。removeEventListener我得到的是无法读取 null 的属性“”。我在“潜在问题”下阅读了有关此问题的 React 17 文档。 “但他们的建议不起作用（通过将可变数据存储到变量中来捕获可变数据）。

useEffect(() => {
  const myRef = ref.current

  myRef.current.addEventListener('mouseenter',enter)
  myRef.current.addEventListener('mouseleave', leave)
 return () => {
   myRef.current.removeEventListener('mouseenter',enter)
   myRef.current.removeEventListener('mouseleave',leave)
}
})

任何和所有的建议将不胜感激！谢谢

我刚开始学习 React Hooks。我有一个名为 appContext.js 的文件，里面有 AppContext

const AppContext = React.createContext(initialState);

我想在文件 checkInfo.js 中使用它

const CheckInfo = (props) => {

    const [state, dispatch] = useContext(AppContext);

    useEffect(() => {
          var personData = {};

          async function fetchData() {

            dispatch({
              type: "isLoding",
              payload: true,
            });
          }
          ////other code
        }

但我有

TypeError: Object is not a function

我哪里错了？