反応の条件付きレンダリング

Question

次のコードでは、変数isActiveがtrueの場合に<li> html要素を太字に設定する必要があります。それ以外の場合はテキストをプレーンでレンダリングする必要があります。

は現在、私は次のエラーが表示されます

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要素が含まれていますタイトル文字列はOKです。

タイトルの周りにカッコを入れると、実際にオブジェクト{ title: title }が定義されていますが、これはリアクションレンダラでは受け入れられません。

混乱は、JSXコードとプレーンJavaScriptコードの範囲で中括弧の異なる意味から来ています。 JSXコードでは、要素内に変数の値を挿入するために使用されます。