时间戳

首页 > 解决方案 > React Js：如何在 dom 中只显示一次组件？

javascript - React Js：如何在 dom 中只显示一次组件？

问题描述

我是 React 的新手，正在尝试构建一个简单的博客项目。

该博客将显示帖子列表，访问者可以单击评论以在帖子下方显示它们。

这是我的问题，我想要一个特定的行为，我希望用户一次只能显示一个评论框/窗口。

如果您单击另一个评论链接，我想强制其他人关闭。

我不知道如何做到这一点......

这是一些代表我的实际应用程序的代码：CondeSandBox

对不起我的英语不好...

标签： javascriptreactjs

解决方案

一种或另一种方式，您需要在所有评论之间共享状态才能做到这一点。这至少需要你回到两层，到DisplayPosts. 您可以传递state和setState向下，或者您可以使用上下文。

这是您的沙箱修改为通过上下文使用共享状态。简而言之，这涉及到：

首先在 App.js（或 DisplayPosts，并不重要）中，创建 Context 并使用 Provider 包装返回：

export const CommentContext = createContext(-1);
export default function App() {
  const [post, setPost] = useState(-1);
  return (
    <CommentContext.Provider value={{ post, setPost }}>
      <div className="App">...</div>
    </CommentContext.Provider>
  );
}

接下来在 Posts.js 中，您只需要使用 useContext 而不是 useState：

const Post = ({ props }) => {
  const { post, setPost } = useContext(CommentContext);
  const { id, title, comments } = props;
  const handleClick = (e) => { // ...
    setPost((pid) => (pid === id ? -1 : id));
  };

  return (<>...
      {post === id ? <DisplayComments postId={id} /> : null}
    </>);
};

这样你就有了一个显示评论的状态，它是应该显示评论的帖子的 id。如果不应该显示任何评论，它会被设置为 -1（我假设你没有 -1 id ......你可以在那个地方使用 null 或任何东西。

*编辑：在沙箱中，我稍微重构了代码以更好地分离组件。我将所有 Context/Provider 的东西放在 DisplayComments 中，并将一个非常基本的包装器提供程序组件导入到 App 中。这样，它将评论逻辑和状态保留在主 App 功能之外。

为了便于说明，我将此处的示例代码保持不变，因为它使代码更短更简单。

推荐阅读