时间戳

首页 > 解决方案 > 如何显示/隐藏 array.map() 的一项

reactjs - 如何显示/隐藏 array.map() 的一项

问题描述

我想根据isCommentShown状态属性显示/隐藏 JSX 的一部分。但是由于这部分位于映射循环内isCommentShown，因此不仅适用于当前映射项，而且适用于所有映射项。因此，当我toggleComment显示/隐藏循环内的每个评论时。我想这可以通过将所有内容移动到单独的组件中来解决，因为每个组件都有自己的状态。但我想知道如果没有那个我是否可以解决这个问题。

const SearchResults = () => {
  const [isCommentShown, setIsCommentShown] = useState(false);

  const toggleComment = () => {
    setIsCommentShown(!isCommentShown);
  };

  return (
    <>
      {props.search_results.map(obj =>
        <div key={obj.id}>
          { obj.comment ? <img onClick={toggleComment}/> : null }
          <div>{obj.text}</div>
          { isCommentShown ? <p>{obj.comment}</p> : null }
        </div>
      )}
    </>
  );
};

标签： reactjsreact-hooks

解决方案

您可以使用该useState钩子创建一个对象，该对象将所有搜索结果 id 作为键和一个布尔值，指示是否应显示评论。

例子

const { useState, Fragment } = React;

const SearchResults = props => {
  const [shownComments, setShownComments] = useState({});

  const toggleComment = id => {
    setShownComments(prevShownComments => ({
      ...prevShownComments,
      [id]: !prevShownComments[id]
    }));
  };

  return (
    <Fragment>
      {props.search_results.map(obj => (
        <div key={obj.id}>
          {obj.comment ? (
            <button onClick={() => toggleComment(obj.id)}>Toggle</button>
          ) : null}
          <div>{obj.text}</div>
          {shownComments[obj.id] ? <p>{obj.comment}</p> : null}
        </div>
      ))}
    </Fragment>
  );
};

ReactDOM.render(
  <SearchResults
    search_results={[
      { id: 0, text: "Foo bar", comment: "This is rad" },
      { id: 1, text: "Baz qux", comment: "This is nice" }
    ]}
  />,
  document.getElementById("root")
);
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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

推荐阅读