如何处理打字稿中的状态？答案

【问题标题】：How to handle states in typescript?如何处理打字稿中的状态？
【发布时间】：2022-01-21 13:48:41
【问题描述】：

您好，我是打字稿的新手，我有工作要做。我需要制作动态类，类似于下面的代码。

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

interface Props {
  text: ReactNode;
}

const ListItem = ({ text }: Props) => {
    let [showMore, setShowMore] = useState(false);

    return (
        <div className="item">
            <div>
                <div className={`text ${showMore ? "active" : ""}`}>{text}</div>
            </div>
            <button onClick={() => setShowMore((s) => !s)}>Show more</button>
        </div>
    );
};

但是我需要在这段代码中实现它，我不知道该怎么做，因为我不理解编写它的人的这种语法。当我尝试实现以前的代码时，我遇到了用这种语法渲染的反应钩子的问题。

希望你能理解我的问题

type DeliveryBranchHitProps = {
  hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({
  hit: delivery_branch,
}: DeliveryBranchHitProps): JSX.Element => (
  <>
      <div className={`branch-opening-week ${showMore ? "active" : ""}`}>
        <p>
          <span className="branch-day">Monday:</span>
          {delivery_branch.opening_monday}
        </p>
        <button onClick={() => setShowMore((s) => !s)}>Show more</button>

    </div>
  </>
);

【问题讨论】：

“我在这种语法中渲染反应钩子时遇到问题”是什么意思，你能给我们举个例子吗？
它给了我无效的钩子调用错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。

标签： javascript html reactjs typescript

【解决方案1】：

请查看这篇文章以了解const func = () => ( .. ) 语法Arrow function without curly braces

现在你的函数返回一个 single 表达式 - 即一些 JSX。要添加一些额外的逻辑，您需要使您的函数多行（注意大括号）：

const Func = (props) => {
  // your hook goes here
  let [state, useState] = useState();

  // return the jsx
  return ( .. )
}

UPD：所以你的情况是：

type DeliveryBranchHitProps = {
  hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({
  hit: delivery_branch,
}: DeliveryBranchHitProps): JSX.Element => {
 let [showMore, setShowMore] = useState(false);

return (
  <>
      <div className={`branch-opening-week ${showMore ? "active" : ""}`}>
        <p>
          <span className="branch-day">Monday:</span>
          {delivery_branch.opening_monday}
        </p>
        <button onClick={() => setShowMore((s) => !s)}>Show more</button>

    </div>
  </>
);

}

【讨论】：

谢谢，我了解函数式组件的语法，但我不了解这个jsx元素语法。你不知道如何重做功能组件吗？
您的组件是一个完全有效的功能组件。你需要做的是给它添加钩子。为此，您需要将函数（“组件”）从单行转换为常规多行。
非常感谢你

【解决方案2】：

不太确定我是否理解你的问题，但可能你想做这样的事情，你有一个通用组件，它需要一些内容chilren。


interface Props {
  text: ReactNode;
  children: ReactNode;
}

const ListItem = ({ text, children }: Props) => {
  let [showMore, setShowMore] = useState(false);

  return (
    <div className="item">
      <div>
        <div className={`text ${showMore ? "active" : ""}`}>
          {text}
          {children}
        </div>

        <button onClick={() => setShowMore((s) => !s)}>Show more</button>
      </div>
    </div>
  );
};

type DeliveryBranchHitProps = {
  hit: SearchIndex.DeliveryBranch;
};

const DeliveryBranchHit = ({ hit: delivery_branch }: DeliveryBranchHitProps): JSX.Element => (
  <>
    <ListItem text={delivery_branch.name} />
      <p>
        <span className="branch-day">Monday:</span>
        {delivery_branch.opening_monday}
      </p>
    </ListItem>
  </>
);

【讨论】：