javascript - 了解 && 在 React 组件中的使用

Question

我试图理解 react 中的这个功能组件。我知道 Post 接受两个参数 post 和 excerpt 。 2 个固定运营商被使用过

这是使用 post 的组件的渲染代码。

        const renderPosts = () => {
            if (loading) return <p>Loading posts...</p>
            if (hasErrors) return <p>Unable to display posts.</p>

            return posts.map(post => <Post key={post.id} post={post} excerpt />)
        }

我不明白(摘录&&)与下面的链接一起做什么。你能向我解释一下吗？还传递了上面 map 助手的摘录，这意味着什么？它没有任何值(value)。

        export const Post = ({ post, excerpt }) => (
          <article className={excerpt ? 'post-excerpt' : 'post'}>
            <h2>{post.title}</h2>
            <p>{excerpt ? post.body.substring(0, 100) : post.body}</p>

            {excerpt && (
              <Link to={`/posts/${post.id}`} className="button">
                View Post
              </Link>
            )}
          </article>
        )

Answer 1

您以 reactjs 作为唯一标签发布了此问题，表明您认为这是一个 react 事物，但从根本上来说，您的问题是关于 javascript事物:“Short circuit conditionals”。

根据您发布的代码:

excerpt && <Link ...>

表达

if excerpt 
  then return <Link ...> 
  else return undefined

因此，如果 excerpt 评估为“falsy”，则不会显示任何内容(因为 React ignores undefined or null )，但如果 excerpt 为“truthy”，则将显示链接。

<小时/>

编辑:

我刚刚注意到您还有第二个问题:

Also passing excerpt from the map helper above, what does that imply? It has no value.

省略属性值会导致 JSX 将其视为 true。请参阅其他地方的 SO answer。

所以这段代码表达了它希望 Post 组件始终添加链接。

请注意，你的第二个问题实际上是非常特定于react的，因为React不遗余力地将这些“空”属性定义为“truthy”，而HTML的默认行为将它们视为“falsy” - 请参阅此SO answer了解更多详情。