Question

我想根据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>
      )}
    </>
  );
};

Answer 1

如果您只想一次显示一个评论，则必须存储要显示的评论ID，而不是存储是非题。唯一标识要扩展的项目很重要

const SearchResults = () => {
  const [commentShown, setCommentShown] = useState({});

  const toggleComment = (id) => {
    setCommentShown(prev => Boolean(!prev[id]) ? {...prev, [id]: true} : {...prev, [id]: false});
  };

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

如果您需要同时打开多个评论，则可以维护一个开放ID的地图

const SearchResults = () => {
  const [commentShown, setCommentShown] = useState('');

  const toggleComment = (id) => {
    setCommentShown(prev => prev.commentShown !== id? id: '');
  };

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

Answer 2

使用ID定位所需的评论上的切换。

更精确地说，使用状态存储显示/隐藏值，并将ID传递给onclick事件以精确确定要切换的注释。这应该可以完成工作：

class SearchResults extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    for (let result of props.search_results) {
      this.state[`${result.id}IsShown`] = true;
    }
  }
  toggleComment(id) {
    let key = `${result.id}IsShown`;
    this.setState({[key]: !this.state[key]});
  }
  render() {
    return (
      <>
        {this.props.search_results.map(result =>
          <div key={result.id}>
            {
              result.comment
              ? <img onClick={() => toggleComment(result.id)}/>
              : null
            }
            <div>{result.text}</div>
            { isCommentShown ? <p>{obj.comment}</p> : null }
          </div>
        )}
      </>
    );
  }
}

Answer 3

您可以使用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>

如何显示/隐藏array.map（）

3 个答案: