私のreactjsコンポーネントのプロパティを表示するには？私は私のコンポーネントで

Question

：私は私のIDEでこのコンポーネントをレンダリングしようとすると

function Message(msg) { 
     //console.log('msg=', msg); 
     return (
       <div> 
        { 
         msg ? 
           <div>{msg}</div> : 
           <div>Nothing</div> 
        } 
       </div> 
     ) 
    } 

私はこのchromeconsole・エラーが発生します：

私は「ハイ」、すなわち、MSGの値を表示するにはどうすればよい

Uncaught Error: Objects are not valid as a React child (found: object with keys {msg}). If you meant to render a collection of children, use an array instead.

私のコンポーネントで？ fiddle

Answer 1

問題は、構文があるので、関数の引数には、あなたが、小道具の値を持つことになりますpropsオブジェクトのでmsg（単に引数名）を取得します、次のとおりです。

function Name (props){ 
    ... 
} 

や小道具にあなたが渡している

found: object with keys {msg})

したがって、このような{msg.msg}を使用し、次のいずれか：

それはエラーを投げている理由です

function Message(msg) { 
    return (
     <div> 
      { 
       msg.msg ? 
        <div>{msg.msg}</div> : 
        <div>Nothing</div> 
      } 
     </div> 
    ) 
} 

かな破壊を使用して、このようにそれを書く：この関数は、MSGキーを持つオブジェクトの小道具 'を受信するので

function Message({msg}) { 

：

function Message({ msg }) { 
    ... 
} 

Answer 2

あなたはに変更する必要があります。

その他の方法：

function Message(props) 
    ... {props.msg} 

Answer 3

あなたが共有しているコードから、「MSG」変数は、オブジェクト {msg: 'hi'}あるので、あなたは、文字列を表示するためのプロパティにアクセスするためにきました。

   { 
        msg ? 
          <div>{msg.msg}</div> : 
          <div>Nothing</div> 
       } 

クリーナーは、ES6の破壊を使用することです。

function Message({msg}) { 
. 
. 
{ 
    msg ? 
     <div>{msg}</div> : 
     <div>Nothing</div> 
} 
. 
.