如何处理 typescript 中的状态？

Question

Hello I am new to typescript and I have job to do here. I need to make dynamic class, something like in this code bellow.

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

But I need to implement it to this code and I have no idea how to do it, because I don't understand this syntax from someone who wrote it. When I try to implement previous code, I have problem with react hooks rendering in this syntax.

I hope you understand my problem

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

Not quite sure I understand your question, but possibly you want to do something like this where you have a generic component that takes some content 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>
  </>
);

Answer 2

Please check this post to understand const func = () => (.. ) syntax Arrow function without curly braces

For now your function returns a single expression - ie some JSX. To add some additional logic you need to make your function multiline (pay attention to the braces):

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

  // return the jsx
  return ( .. )
}

UPD: so for your case it is:

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

}