オブジェクトを小道具で受け渡しする

Question

私はReactとオブジェクトに属性を渡しても、後続のエラーが発生するのが初めてです。ここで

Uncaught Invariant Violation: 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 MeetingComponent. 

は私のコードです：

Main.jsx

import React from 'react'; 
import MeetingComponent from '../components/Meeting.jsx'; 

let meeting = { 
    title: 'Some title' 
}; 

class AppComponent extends React.Component { 
    render() { 
     return (
      <div className="index"> 
       <MeetingComponent dataMeeting={meeting} /> 
      </div> 
    ); 
    } 
} 

AppComponent.defaultProps = {}; 

export default AppComponent; 

Meeting.jsx

import React from 'react'; 

class MeetingComponent extends React.Component { 
    render() { 
     return (
      <div>{this.props.dataMeeting}</div> 
     ); 
    } 
} 

MeetingComponent.defaultProps = {}; 

export default MeetingComponent; 

どのように私はこの問題を解決することができますか？ベストプラクティスは何ですか？

Answer 1

問題は、あなたが反応、多分あなたはあなたのケースでは、

<div>{this.props.dataMeeting.title}</div> 

Answer 2

ベストプラクティスをできるだけ平易としてあなたの小道具を作るでやろうとしたのオブジェクトをレンダリングすることはできませんここ

<div>{this.props.dataMeeting}</div> 

ですそれは

<MeetingComponent title={ meeting.title } /> 

class MeetingComponent extends React.Component { 
propTypes = { 
    title: React.PropTypes.string.isRequired 
} 
render() { 
    return (
     <div>title: { this.props.title }</div> 
    ); 
    } 
} 

ことで、常により良い警告メッセージのpropTypesを使用することができ