在 React 中使用 If 语句

Question

我对使用 React 编码相当陌生。我正在尝试使用 if / else 语句，然后在内容正文中使用结果。此外，另一个重要信息是它与 Sanity CMS 相关联，因此我正在从数据库中提取内容。我想我遗漏了一些非常简单的东西，但是从 React 的角度来看，我错误地使用了 if 语句。我已经阅读了文档，但需要一些新的视角。

我也遇到了一个错误： return null = 'return' 语句只能在函数体中使用。

import { SanityContent } from "../../components/sanityContent";
import { Post, getPosts } from "../../utils/getPosts";
import { useDomain } from "../../utils/domain";

const post = getPosts();

if (post.title = 'Cookie Policy'){
   <div> post.legalDoc </div>
}
if (!post) {
   return null;
}


function CookiePolicy() {
  return (
    <Layout>
      <SanityContent content={post.legalDoc} />

有什么想法吗？

Answer 1

是的，这很奇怪，但也很简单。

您的代码的解决方案：

import { SanityContent } from "../../components/sanityContent";
import { Post, getPosts } from "../../utils/getPosts";
import { useDomain } from "../../utils/domain";

function CookiePolicy() {
  const test = () => {
    const post = getPosts();

    if (post.title === "Cookie Policy") {
      console.log("YUP");
      return <div>{post.legalDoc}</div>;
    } else {
      console.log("NOPE");
      return null;
    }
  };

  return <div>{test()}</div>;
}

我还发了codesandbox 来演示一下。

另外，如果您需要在组件中使用异步 if-check 函数，我在这里回答了类似的问题：objects are not valid as a react child when trying to render component based off of AsyncStorage React-Native