javascript - react 中的条件渲染

Question

在下面的代码中，我需要为 <li> 设置文本html 元素在变量 isActive 为真时加粗，否则文本应以纯文本呈现。

目前我收到以下错误:

Objects are not valid as a React child (found: object with keys {title}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Navigation

如何解决？

import React from 'react'

const idSuffix = 'navigation__'

const Navigation = ({ onClick, id, title, tooltip, isActive }) => (

  <li id={`${idSuffix}${id}`} onClick={onClick} alt={tooltip} data-active={isActive}>
    {isActive ? <b>{title}</b> : {title} }

  </li>
)

export default Navigation

Answer 1

从 title 中删除大括号:

const Navigation = ({ onClick, id, title, tooltip, isActive }) => (
    <li id={`${idSuffix}${id}`} onClick={onClick} alt={tooltip} data-active={isActive}>
        {isActive ? <b>{title}</b> : title }
    </li>
);

如果 isActive === true，

元素将包含一个 JSX 元素，标题字符串包裹在 元素中，否则它只包含标题字符串，这是 OK .

当你用大括号括住标题时，你实际上是在定义一个对象 { title: title } ，这是 React 渲染器 Not Acceptable 。

混淆来自花括号在 JSX 代码和普通 JavaScript 代码范围内的不同含义。在 JSX 代码中，它们用于在元素中注入(inject)变量的值。