javascript - 如何在 React 中单独切换多个显示

Question

我有多个从 API 请求中获得的帖子。我希望每个帖子都有一个切换开关，以便有人可以单击它，并且该帖子的其余信息将会显示。我目前如何设置它，当单击切换“显示更多”时，它会打开所有帖子的所有显示。我正在使用 NPM react-toggle-display 包。我如何设置它以便每个帖子都可以切换它与其他帖子同时显示？

Posts.js:

import React, {Component} from 'react';
import axios from 'axios';
import styles from './posts.css';
import ToggleDisplay from 'react-toggle-display';

class Posts extends Component {

  constructor(props) {
    super(props)
    this.state = {
      posts: [],
      show : false
    }
  }

  handleClick() {
    this.setState({
      show: !this.state.show
    });
  }


  componentDidMount() {
    axios.get('/api/posts')
    .then(response => {
      console.log(response)
      this.setState({posts: response.data})
    })
    .catch(error => console.log(error))
  }

  render() {
    return (
      <div>
        <h1>Posts</h1>
        <div class="ui section divider"></div>
        {this.state.posts.map((post) => {
          return(
            <div key={post.id}>
              <img class="image" src={post.image}/>
              <p>
                <button onClick={ () => this.handleClick() }>Show More</button>
                {post.title}
              </p>
              <ToggleDisplay show={this.state.show}>
                <p>
                  {post.body}
                </p>
                <p>
                  <div dangerouslySetInnerHTML={{ __html: post.link }} />
                </p>
              </ToggleDisplay>
              <div class="ui section divider"></div>
            </div>
          )
        })}
      </div>
  );
}

}

export default Posts

Answer 1

有几种方法可以做到这一点，但基本上可以归结为每个帖子都有一个 bool 值。

如果您想保留帖子容器中的所有状态，那么您可以向每个帖子添加一个字段来跟踪帖子是否打开:

this.setState({posts: response.data.map(post => ({ ...post, show: false }))})

然后像这样渲染切换:

<ToggleDisplay show={post.show}>{...}</ToggleDisplay>

另一种方法是创建一个新的 Post 组件来跟踪它自己的状态。