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

Question

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

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

谢谢!

Answer 1

使用 React，您可以根据状态轻松调整组件的渲染。您可以在状态中有一个 bool 值(例如 isOpen)，并在单击“更多/更少”按钮时切换该值。

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

我用存储在数组中的数据做了一个示例，但您可以轻松适应您的情况。

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>