使用 map 添加组件时在 React 组件中实现 "show more, show less"

Question

有这个组件：

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，具有class main-div。对于我们通过道具 (data) 收到的每个元素，我们正在创建一个 child，具有 class child-div.

我的问题是：

有没有办法在呈现组件时仅显示第一个 child-div，放置一个按钮“显示更多”- 单击此按钮以显示所有 child divs？按钮名称更改为“显示较少”-再次单击时 return 到初始状态？

我发现了一些类似的实现，但不知道如何将其放入此结构中。这是一个 example.

Answer 1

使用 state 来 filter/slice 您的数据：

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;

使用 map 添加组件时在 React 组件中实现 "show more, show less"

Implement "show more, show less" in React component when using map for adding the components

javascript

show-hide

reactjs

react-hooks