Question

我正在显示数据库中的项目列表，对于每个项目，我有一个按钮“显示更多/更少”。单击此按钮时，我想以一个很好的向下滑动/向上效果显示/隐藏额外的内容。我已经实现了此功能，但没有下滑/上移效果，但希望使用React Collapse使其更加用户友好。

以下是我尝试实施 React Collapse 功能的组件：

import React from 'react';
import ReactDOM from 'react-dom';
//import axios from 'axios';
import NewPost from './NewPost';
import {Collapse} from 'react-collapse';

class Posts extends React.Component {
    constructor(props) {
        super(props);

        this.toggleClass= this.toggleClass.bind(this);
        this.state = {
            activeIndex: null
        }
    }

    toggleClass(index, e) {     
        this.setState({ activeIndex: this.state.activeIndex === index ? null : index });
    };

    moreLess(index) {
        if (this.state.activeIndex === index) {
            return (
                <span>
                    <i className='fas fa-angle-up'></i> Less
                </span>
            );
        } else {
            return (
                <span>
                    <i className='fas fa-angle-down'></i> More
                </span>
            );                      
        }
    }

  render () {
        let content;

        if (this.props.loading) {
            content = 'Loading...';
        } else {
          content = this.props.posts.map((post, key) => {
            return(
              <li key={key}>
                <div>   
                  <span>{post.id}</span>
                  <span>{post.message}</span>
                  <button className="btn btn-primary btn-xs" onClick={this.toggleClass.bind(this, key)}>
                    {this.moreLess(key)}
                  </button>
                </div>
                <Collapse isOpened={true}>
                  <div className={'alert alert-info msg '+(this.state.activeIndex === key ? "show" : "hide")}>
                    {post.message}
                  </div>
                  </Collapse>
                </li>
              )
            });
        }
        return (
          <div>
            <h1>Posts!</h1>
            <div className="row">
              <div className="col-md-6">
                <ul>
                  {content}
                </ul>
              </div>
            </div>
        </div>
      );
  }
}

export default Posts

但是当我点击更多/更少按钮时，折叠中的内容不会显示 - 点击按钮后没有任何反应。

我在这里想念的是什么？

Answer 1

您没有将正确的检查绑定到<Collapse isOpened={true}>。而不是true，你应该把（this.state。）activeIndex === index（当前项索引）放在这样：

<Collapse isOpened={this.state.activeIndex === index}>

因为activeIndex它实际上可能会崩溃。我已为您制作了代码框，因此您可以确保它有效：https://codesandbox.io/s/jzx44ynyqw

但我认为这是其中最重要的部分（请注意，您的索引名为key，我只是为了方便而重命名）：

<li key={index}>
  <div>
    <p>{post.title}</p>
    <Collapse isOpened={activeIndex === index}>
      <div
       className={classNames("alert alert-info msg", {
                    show: activeIndex === index,
                    hide: activeIndex !== index
                  })}
      >
       {post.message}
      </div>
     </Collapse>
     <button
       className="btn btn-primary btn-xs"
       onClick={this.toggleClass.bind(this, index)}
      >
       {this.moreLess(index)}
      </button>
    </div>
   </li>

Answer 2

如果您正在使用函数和挂钩，我建议您

import { Collapse } from "react-collapse";
import classNames from "classnames";
import React, { useState} from 'react';

export default function yourFunction() {
    const [activeIndex, setActiveIndex] = useState(null);
    return(
    {groups.map((group, index) => (
        <button className="btn btn-primary navbar-toggler"
                type="button"
                data-toggle="collapse"
                onClick={event => setActiveIndex(
                    activeIndex === index ? null : index
                )}
                data-target="#collapseExample"
                aria-expanded="false"
                aria-controls="collapseExample">
                [CLICK HERE]
        </button>
        <Collapse isOpened={activeIndex === index}>
            <div
                className={classNames("alert alert-info msg", {
                    show: activeIndex === index,
                    hide: activeIndex !== index
                    })}
                >
               <a>[YOUR COLLAPSE CONTENT]</a>
             </div>
        </Collapse>
    )
}

React Collapse - 如何切换列表中的项目？

2 个答案: