javascript - 如何处理 typescript 中的状态？

Question

你好，我是 typescript 的新手，我在这里有工作要做。我需要创建动态类，如下面的代码所示。

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>
    );
};

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

希望你能理解我的问题

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>
  </>
);

Answer 1

不太确定我理解你的问题，但你可能想做这样的事情，你有一个通用组件，它需要一些内容 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>
  </>
);