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

Question

我有许多的div <p>和<span>内，是否有如何创建一个显示更多/更少与ReactJS按钮来调整一个div的大小任何的例子吗？

我尝试安装npm阅读更多内容，并安装了npm truncate，但似乎无法解决我的问题。因为我必须调整React的div大小和按钮中的文本。

谢谢！

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。Collapse像这样将你的 div 包裹在组件中......

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/utilities/transitions/