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

Posted 2023-02-22

【中文标题】如何处理打字稿中的状态？

【英文标题】：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>
  </>
);

【问题讨论】：

“我在这种语法中渲染反应钩子时遇到问题”是什么意思，你能给我们举个例子吗？

它给了我无效的钩子调用错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。

【参考方案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>
  </>
);