为什么它不显示在屏幕上

Question

基本上我想显示更少的描述，当我按“阅读更多”时我想显示完整的描述

代码：

import { useState } from "react";

const JobsListing = ({ job }) => {
  const [showFullDescription, setShowFullDescription] = useState(false);

  let description = job.description;

  if (!showFullDescription) {
    description = description.setstring(0, 90) + "...";
  }

  return (
    <div>
      <div className="bg-white rounded-xl shadow-md relative">
        <div className="p-4">
          <div className="mb-6">
            <div className="text-gray-600 my-2">{job.type}</div>
            <h3 className="text-xl font-bold">{job.title}</h3>
          </div>

          <div className="mb-5">{description}</div>

          <h3 className="text-indigo-500 mb-2">{job.salary}</h3>

          <div className="border border-gray-100 mb-5"></div>

          <div className="flex flex-col lg:flex-row justify-between mb-4">
            <div className="text-orange-700 mb-3">
              <i className="fa-solid fa-location-dot text-lg"></i>
              {job.location}
            </div>
            <a
              href={`/job/${job.id}`}
              className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
            >
              Read More
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default JobsListing;

我希望使用 setstring 显示从 0, 90 开始的描述，以显示更少的描述，当我单击“阅读更多”时，我希望显示完整的描述

Answer 1

1. 您没有使用按钮切换

   showFullDescription

   ，我添加了一个

   onClick()

   <button onClick={() => setShowFullDescription(p => !p)}>
       Read More
   </button>
   

2. 不要使用开头的

   if

   ，而是使用内联语句来呈现完整的描述，或使用

   substring

   仅显示前 50 个字符：

   {
       (showFullDescription)
           ? job.description
           : job.description.substring(50) + ' ...'
   }
   

---

工作示例：

const { useState } = React;

const JobsListing = () => {
  
  const job = {
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    salary: 1,
    type: 'Foo',
    title: 'Bar'
  } 
  const [showFullDescription, setShowFullDescription] = useState(false);

  return (
    <div>
      <div className="bg-white rounded-xl shadow-md relative">
        <div className="p-4">
          <div className="mb-6">
            <div className="text-gray-600 my-2">{job.type}</div>
            <h3 className="text-xl font-bold">{job.title}</h3>
          </div>

          <div className="mb-5">
            {
              (showFullDescription)
                ? job.description
                : job.description.substring(50) + ' ...'
            }
          </div>

          <h3 className="text-indigo-500 mb-2">{job.salary}</h3>

          <div className="border border-gray-100 mb-5"></div>

          <div className="flex flex-col lg:flex-row justify-between mb-4">
            <div className="text-orange-700 mb-3">
              <i className="fa-solid fa-location-dot text-lg"></i>
              {job.location}
            </div>
            <button
              onClick={() => setShowFullDescription(p => !p)}>
              Read More
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};


ReactDOM.render(<JobsListing />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>