使用 map 添加组件时，在 React 组件中实现“显示更多，显示更少”

如何解决使用 map 添加组件时，在 React 组件中实现“显示更多，显示更少”

有这个组件：

import React from 'react';
import PropTypes from 'prop-types';
import './style.scss';

const MyComponent = ({ data }) => {
  return (
      <div className="main-div">
        {data.map((event,index) => (
          <div key={index} className="child-div">
            {event.message}
          </div>
        ))}
      </div>
  );
};

MyComponent.propTypes = {
  data: PropTypes.array
};

export default MyComponent;

整个组件有一个 div，类为 main-div。对于我们通过 props (data) 接收到的每个元素，我们创建了一个子元素，类为 child-div。

我的问题是：

有没有办法在组件渲染时只显示第一个 child-div ，放置一个“显示更多”按钮 - 当点击它以显示所有子 div 时？并且按钮名称更改为“少显示”-再次单击时返回初始状态？

我发现了一些类似的实现，但不知道如何把它放到这个结构中。这是一个 example。

解决方法

使用 state 过滤/切片您的数据：

import React from 'react';
import PropTypes from 'prop-types';
import './style.scss';

const MyComponent = ({ data }) => {
  const [expanded,setExpanded] = useState(false)
  const dataForDisplay = expanded ? data : data.slice(0,10)
  return (
      <div className="main-div">
        {dataForDisplay.map((event,index) => (
          <div key={index} className="child-div">
            {event.message}
          </div>
        ))}
        <button type="button" onClick={() => setExpanded(!expanded)}>
          {expanded ? 'Show Less' : 'Show More'} 
        </button>
      </div>
  );
};

MyComponent.propTypes = {
  data: PropTypes.array
};

export default MyComponent;