有條件地呈現在反應中

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代碼中，它們用於在元素中注入變量的值。