有条件地呈现在反应中

Question

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

目前我收到以下错误：

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，所述<李>元素将包含与包裹在<b>元件的标题字符串JSX元件，否则它会只包含标题字符串，这是确定的。

当您在标题周围加上大括号时，实际上是定义了一个对象{ title: title }，这是React渲染器无法接受的。

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