使用ReactJS隐藏/显示内容 [英] Hide/Show content using ReactJS

问题描述

我正在尝试实现显示更多/显示更少".到目前为止，我已经能够调出一个ItemViewer组件，在其中显示项目列表.对于每个部分，都有显示更多/显示更少"链接.每当项目数大于3时，显示更多"应该是可见的，并且应该能够切换(显示更多"/显示更少").当项目数少于3时，不要显示链接.同样，当没有数据时，显示找不到数据".

I am trying to implement to Show More/Show Less. So far I have was able to bring up a ItemViewer Component where in I display the list of items. For each section there would be Show More / Show Less links. Show More should be visible whenever the number of items is greater than 3 and it should be able to toggle(Show More/ Show Less). When the number of items is less than 3 dont show the link. Also when there is no data display "No data found".

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

有人可以在这里帮助我吗?

Can someone help me here?

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;

推荐答案

您可以在ItemViewer组件内保持切换状态，并使用该值可以决定显示更多还是更少.

You can keep a toggle state inside ItemViewer component, and using that value you can decide to show more or show less.

代码框

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;

这篇关于使用ReactJS隐藏/显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！