使用 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

请让我知道这对你有没有用。

快乐编码:)