Question

我的div里面有很多<p>和<span>，是否有任何关于如何使用ReactJS创建一个显示更多/更少按钮来调整div大小的示例？

我曾尝试安装npm read more和npm truncate，但似乎没有解决我的问题。因为我必须调整div的大小和单击React中的按钮中的文本。

谢谢！

Answer 1

使用React，您可以根据状态轻松调整组件的渲染。您可以在状态（例如isOpen）中使用布尔值，并在单击更多/更少按钮时切换值。

之后，您只需渲染X项并根据布尔值更改按钮文本。

我在数组中存储了数据，但您可以很容易地适应您的情况。

const MAX_ITEMS = 3;

class MoreLessExample extends React.Component{
  componentWillMount() {
    this.state = {
      isOpen: false,
    };
    this.items = [
     'Item 1',
     'Item 2',
     'Item 3',
     'Item 4',
     'Item 5',
     'Item 6',
    ];
  }
  
  toggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }
  
  getRenderedItems() {
    if (this.state.isOpen) {
      return this.items;
    }
    return this.items.slice(0, MAX_ITEMS);
  }

  render() {
    return(
      <div>
        {this.getRenderedItems().map((item, id) => (
          <div key={id}>{item}</div>
        ))}
        <button onClick={this.toggle}>
          {this.state.isOpen ? 'less' : 'more'}
        </button>
      </div>
    );
  }
}
    
ReactDOM.render(<MoreLessExample />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

您可能希望在其上使用react-bootstrap。将你的div包裹在这样的Collapse组件中......

constructor(){
  super();
  this.state = { showText: false };
}

render(){
  return(
    <div>
      <p>Some text here...</p>
      <a onClick={() => this.setState({ showText: !this.state.showText })>See more</a>
      <Collapse in={this.state.showText}>
        <div>
           <span>
             Some more texts here...          
           </span>
        </div>
      </Collapse>
    </div>
  );
}

查看https://react-bootstrap.github.io/components.html#transitions-collapse

Answer 3

这是一个实质性的UI答案：

import { Button, makeStyles } from "@material-ui/core";
import React, { useState } from "react";

const useStyles = makeStyles((theme) => ({
  hidden: {
    display: "-webkit-box",
    WebkitLineClamp: 4,
    overflow: "hidden",
    WebkitBoxOrient: "vertical"
  }
}));
function ReadMore({ children }) {
  const classes = useStyles();
  const [isHidden, setIsHidden] = useState(true);
  return (
    <>
      <div className={isHidden ? classes.hidden : null}>{children}</div>
      <Button size="small" onClick={() => setIsHidden(!isHidden)}>
        {isHidden ? "⬇ More" : "⬆ Less"}
      </Button>
    </>
  );
}

export default ReadMore;

并像这样实现它：

       <ReadMore>
           <Typography>
              Hey World, what's up
           </Typography>
       </ReadMore>

Answer 4

我知道这个问题有点老了，但我想我会加入我的解决方案，使用功能组件来简单地显示更多文本，这应该有助于让任何偶然发现这个问题的人朝着正确的方向前进。

    const [showMore, setShowMore] = useState<boolean>(false);
        
    const text =  'CaPay is a super application that includes 68 high qualityscreens to help you launch digital wallet application projects and speed up your design process. Designed on 2 leading platforms Sketch & Figma makes it easy to customize to create impressive projects weee I am longer show more please CaPay is a super application that includes 68 high qualityscreens to help you launch digital wallet application projects and speed up your design process. Designed on 2 leading platforms Sketch & Figma makes it easy to customize to create impressive projects weee I am longer show more please';
            
             const getText = () => {
                // For Text that is shorter than desired length
                if (text.length <= 258) return text;
                // If text is longer than desired length & showMore is true
                if (text.length > 258 && showMore) {
                  return (
                    <>
                      <p>{text}</p>
            
                      <button
                        onClick={() => setShowMore(false)}>
                        Show Less
                      </button>
                    </>
                  );
                }
                 // If text is longer than desired length & showMore is false
                if (text.length > 258) {
                  return (
                    <>
                      <p>{text.slice(0, 258)}</p>
            
                      <button
                        onClick={() => setShowMore(true)}>
                        Show Full Description
                      </button>
                    </>
                  );
                }
              };
//Then just call in component
<p>{getText()}</p>

如何使用ReactJS创建一个显示更多/更少按钮来调整div的大小？

4 个答案: