在既不是反应函数组件也不是自定义反应钩子函数的函数中调用反应钩子“useState”

Question

我正在尝试使用react钩子创建一个悬停以显示div，我遇到了以下问题：

第69:31行：在函数“renderHideOptionalClauseTrigger”中调用React钩子“useState”，该函数既不是React函数组件，也不是自定义React钩子函数React钩子/钩子规则

搜索关键字以了解有关每个错误的更多信息。

以下是我的代码库：

import React, { useState, useEffect } from "react";

const renderHideOptionalClauseTrigger = () => {
  const [inHover, setHover] = useState(false);

  return (
    <div className="my-option-clause">
      <text>My Optional Loan Clause</text>
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
      >
        <path fill-rule="evenodd" clip-rule="evenodd" d="..."/>
      </svg>
    </div>
  );
};


function LoanTerms(props) {
  const router = useRouter();
  const {
    currentLoan,
    getUserLoanRequest,
    updateUserLoanProposalRequest,
    user,
  } = props;

return (

<>
...
                  <Collapsible
                    trigger={renderOptionalClauseTrigger()}
                    classParentString="opt-data"
                    overflowWhenOpen="visible"
                    triggerWhenOpen={renderHideOptionalClauseTrigger()}
                  >

                    <div className="FlowCard__info-text">
                      Will be added verbatim as last clause to the loan
                      agreement. See{" "}
                      <Link className="orange-link" to="/product">
                        Product page
                      </Link>{" "}
                      for other clauses. (1000 characters)
                    </div>
<>

Answer 1

为了呈现您的组件并在任何地方使用它，您必须在文件的末尾导出组件。在你的例子中，如果你想使用LoanTERN，你应该写导出默认的LoanTERN。

Answer 2

React期望React组件以大写首字母命名。尝试RenderHideOptionalClauseTrigger而不是renderHideOptionalClauseTrigger