使用 ReactJS 隱藏/顯示內容

Question

我正在嘗試實現顯示更多/顯示更少。 到目前為止，我已經能夠調出一個 ItemViewer 組件，在其中顯示項目列表。 對於每個部分，將有顯示更多/顯示更少鏈接。 當項目數大於 3 時，顯示更多應該可見，並且應該能夠切換（顯示更多/顯示更少）。 當項目數少於 3 時不顯示鏈接。 此外，當沒有數據時顯示“未找到數據”。

我想出了一個沙箱： https : //codesandbox.io/s/pensive-kirch-1fgq3

有人可以在這里幫助我嗎？

import React from "react";
import ReactDOM from "react-dom";
import ItemViewer from "./Item";

const item1 = ["i1d1", "i2d2", "i3d3"];
const item2 = ["i2d1", "i2d2", "i2d3", "i2d4"];
const item3 = ["i3d1", "i3d2", "i3d3", "i3d4", "i3d5"];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      item1: [],
      item2: [],
      item3: []
    };
  }

  componentDidMount() {
    this.setState({
      item1,
      item2,
      item3
    });
  }

  render() {
    let { item1, item2, item3 } = this.state;
    return (
      <>
        <ItemViewer index="1" item="item1" itemData={item1} />
        <ItemViewer index="2" item="item2" itemData={item2} />
        <ItemViewer index="3" item="item3" itemData={item3} />
      </>
    );
  }
}

import React, { useState } from "react";

const ItemViewer = props => {
  function renderItems(list, itemType) {
    if (list && list.length > 0) {
      return (
        <>
          <ul>
            {list.map(function(item) {
              return <li key={item}>{item}</li>;
            })}
          </ul>
        </>
      );
    } else {
      return <p>No Items Found</p>;
    }
  }

  return (
    <div>
      <span>
        {props.index}: {props.item}
      </span>
      <div>
        <a href="#">Show more</a>
      </div>
      <div>
        <a href="#">Show Less</a>
      </div>
      <div>{renderItems(props.itemData, props.item, props.itemDetailData)}</div>
    </div>
  );
};

export default ItemViewer;

Answer 1

使用組件狀態和 onClick 偵聽器：

  function renderItems(list, itemType) {
    if (list && list.length > 0 && this.state.showMore1) {
      ...

  <div>
    {" "}
    <a onClick={() => this.setState({ showMore1: !this.state.showMore1 )} href="#">Show {this.state.showMore1 ? 'Less' : 'More'}</a>
  </div>

Answer 2

將處理程序用於顯示事件。

https://codesandbox.io/s/blissful-swirles-rchv0

  handleShowEvents(index) {
    let showMore = [...this.state.showMore];
    showMore[index] = !showMore[index];
    this.setState({
      ...this.state,
      showMore: showMore
    });
  }

此外，使用自定義列表構建器。

 itemBuilder() {
    let items = [];
    for (let i = 0; i < this.state.showMore.length; i++) {
      const item = `item${i + 1}`;
      if (this.state.showMore[i]) {
        items.push(
          <ItemViewer
            index={i}
            item={item}
            itemData={this.state.items[i]}
            handleShowEvents={this.handleShowEvents}
          />
        );
      } else {
        items.push(
          <ItemViewer
            index={i}
            item={item}
            itemData={this.state.items[i].slice(0, 3)}
            handleShowEvents={this.handleShowEvents}
          />
        );
      }
    }
    return items;
  }

Answer 3

您可以在 ItemViewer 組件內保持切換狀態，並使用該值決定顯示更多或顯示更少。

代碼沙盒

import React, { useState } from "react";

const ItemViewer = ({ index, itemData, item }) => {
  const [toggle, setToggle] = useState(false);

  function renderItems(list) {
    if (list && list.length > 0) {
      if (list.length > 3 && toggle === false) {
        return renderList(list.slice(0, 3), "Show More");
      } else if (list.length > 3 && toggle === true) {
        return renderList(list, "Show Less");
      } else if (list.length === 3) {
        return renderList(list, "", false);
      }
    } else {
      return <p>No Items Found</p>;
    }
  }

  function renderList(list, buttonText, showButton = true) {
    return (
      <div>
        <ul>
          {list.map(function(item) {
            return <li key={item}>{item}</li>;
          })}
        </ul>
        {showButton && (
          <div>
            <button onClick={toggleHandler}>{buttonText}</button>
          </div>
        )}
      </div>
    );
  }

  const toggleHandler = () => {
    setToggle(prev => !prev);
  };

  return (
    <div>
      <span>
        {index}: {item}
      </span>
      <div>{renderItems(itemData)}</div>
    </div>
  );
};

export default ItemViewer;

Answer 4

看看這個https://codesandbox.io/s/smoosh-shape-vinp6

請讓我知道這對你有沒有用。

快樂編碼:)