Question

我是React.js的新手，正在尝试做一个研究项目。我的问题如下。我有一个必须显示的JSON对象（帖子）列表，单击标题时，帖子详细信息将出现在模式窗口中。但是独立于我单击的帖子，模式窗口始终仅向我显示第一篇帖子的详细信息。这是代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>React App</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  </head>
  <body>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="./style.css">

    <script type="text/babel">
      const postsList = [
          {
            "id": "5",
            "title": "Lorem Ipsum dolor",
            "contents": "Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna. Cupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad. Nisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.",
            "published": "12.12.1221, 12:10",
            "author": {
            "nickname": "paladdin"
            }
          },
          {
            "id": "3",
            "title": "Ex sunt sunt aliqua",
            "contents": "Ex sunt sunt aliqua reprehenderit aliqua occaecat. Minim anim commodo officia veniam proident aute cillum eu sunt aute nostrud. Laboris fugiat velit ut pariatur occaecat adipisicing pariatur occaecat. Duis sint enim et consectetur quis pariatur laborum excepteur. Ipsum aliquip qui laborum commodo consectetur do velit veniam occaecat. Ad nisi dolor cillum elit magna dolor voluptate ea. Enim in duis ea consequat sunt Lorem aute.\n\nEst elit sunt quis officia reprehenderit do elit commodo eiusmod esse voluptate. Sit ipsum commodo sint voluptate culpa labore elit magna ullamco nostrud. Laboris magna magna anim labore mollit irure voluptate. Aute non magna aliqua aliqua sunt. Velit mollit consectetur aliqua id tempor ut. Tempor cupidatat aliquip excepteur occaecat incididunt nulla Lorem sint.\n\nNon commodo anim deserunt in et aliquip incididunt ut consectetur sunt esse commodo deserunt et. Tempor fugiat laboris cillum laboris labore. Deserunt quis ad do labore amet culpa officia. Esse et officia nostrud tempor occaecat officia anim incididunt amet sunt excepteur Lorem. Aute occaecat magna velit nisi sit anim consequat velit qui pariatur. Esse incididunt id officia aliqua anim ut et.",
            "published": "12.12.1221, 12:05",
            "author": {
              "nickname": "rebelizer"
              }
          },
      {
          "id": "1",
          "title": "Hello my new world",
          "contents": "Culpa dolor deserunt veniam irure amet officia excepteur labore nisi labore ad labore laborum aute. Ea irure sit exercitation ex. Aliquip dolore duis ullamco labore qui. Et anim irure laborum quis ipsum. Adipisicing culpa est ea velit veniam dolor nisi. Sit cupidatat velit commodo eu.\n\nUt nulla ut irure cillum irure sint sunt cupidatat tempor laboris incididunt elit occaecat fugiat. Reprehenderit enim cupidatat consectetur pariatur ad pariatur consequat veniam do fugiat Lorem laborum do velit. Nulla aute magna magna nisi officia et. Aute adipisicing eu eiusmod tempor exercitation sint non enim laboris dolor adipisicing.\n\nEa do sint pariatur voluptate ad culpa irure. Cillum pariatur deserunt fugiat elit. Exercitation labore amet deserunt magna. Velit veniam aute officia aliqua ipsum veniam pariatur. Aliquip ullamco fugiat officia non sunt ad consequat ipsum est esse commodo reprehenderit. Ad quis consectetur est exercitation fugiat eiusmod. Laborum reprehenderit esse qui irure.",
          "published": "12.12.1221, 12:00",
          "author": {
            "nickname": "rupetra"
            }
       }
    ];

      class Post extends React.Component {
        render() {
        const {post} = this.props;

        return (
          <div className = "card" style={{width: "100%"}}>
            <div className = "card-header text-center">
              <h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>
            </div>
            <div className = "card-body text-left">
              {post.contents}
            </div>
            <div className = "card-footer text-right text-muted">
              published on {post.published} by <i>{post.author.nickname}</i>
            </div>
            <div className="modal fade" id="post-details-modal">
              <div className="modal-dialog">
                <div className="modal-content">
                  <div className="modal-header">
                    <h4 className="modal-title">{post.title}</h4>
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close"> x </button>
                  </div>
                  <div className="modal-body">{post.contents}</div>
                  <div className="modal-footer text-muted">created by {post.author.nickname}</div>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }

    class PostList extends React.Component {
      render() {
        const {posts} = this.props;

        return posts.map((post) =>
          <div key= {post.id} className="posts">
            <Post post = {post}/>
          </div>
        );
      }
    }

      class App extends React.Component {
        render() {
          return (
            <div>
              <div className="row"></div>
              <div className="row">
                <div className="col-1 text-right mt-4">
                  <div>
                    <i className="fas fa-keyboard fa-3x mb-5"></i>
                  </div>
                  <div>
                    <i className="fas fa-redo-alt fa-3x mb-5"></i>
                  </div>
                </div>
                <div className="col-8 posts-zone">
                  <PostList posts = {postsList}/>
                </div>
                <div className="col-3"></div>
              </div>
              <div className="row"></div>
            </div>
          );
        }
      }

      ReactDOM.render(<App/>, document.getElementById("root"));
    </script>

    <div id="root"><div>
    </body>
</html>

解决方案：

感谢Tim Ogilvy谁给了我rihgt的主意，发现了以下解决方案：
在render（）方法中，我创建了2个变量：

const dataTargetName = "#post-details-modal-" + post.id; 
const postDetailsId = "post-details-modal-" + post.id;

然后：

<h2 data-toggle="modal" data-target={dataTargetName}>{post.title}</h2>

和：

<div className="modal fade" id={postDetailsId}>

Answer 1

您需要使用处于打开和关闭状态的组件。 Bootstrap和jQuery在这里不是正确的解决方案。同样，您应该在大多数情况下使用无状态/纯组件。您的问题在发布组件中。

在此处设置应切换的内容：

<h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>

，然后为迭代器中的每个帖子将ID设置为相同的内容：

<div className="modal fade" id="post-details-modal">

尝试以下操作：（切换）

<h2
  data-toggle="modal"
  data-target={`#post-details-modal-${post.id}`}
>
  {post.title}
</h2>

帖子：

<div className="modal fade" id={`post-details-modal-${post.id}`}>

您仍然应该考虑使用ReactBootstrap，但这可能会让您脱颖而出。

原理：DOM ID必须是唯一的。您具有相同ID的多个实例，因此浏览器仅是第一个。

不同列表项的数据相同。 React.js

解决方案：

1 个答案: