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}</div>

您无法在React中渲染对象，也许您正在尝试

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

Answer 2

我已经使用这种方法通过组件传递对象

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

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


class MeetingComponent extends React.Component {
    render() {
const data = JSON.parse(this.props.dataMeeting);
        return (
            <div>{data}</div>
            <div>{data.title}</div>
        );
    }
}

Answer 3

  static propTypes = {
    pieChartSortSettings: PropTypes.shape({
      type: PropTypes.string.isRequired,
      order: PropTypes.string.isRequired,
    }),
  };

这是一个如何在道具中传递物体的示例。您还可以检出以下方法：PropTypes.arrayOf和PropTypes.objectOf（更多：https://reactjs.org/docs/typechecking-with-proptypes.html）

Answer 4

如果要传递对象的属性，可以按照以下步骤进行操作：

<MeetingComponent {...meeting} />

要在会议组件内部访问会议对象的标题，可以直接调用它this.props.title

您可以将其呈现为<div>{this.props.title}</div>

Answer 5

最佳做法是让你的道具尽可能简洁，在你的情况下可能是

<MeetingComponent title={ meeting.title } />

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

始终使用propTypes来获得更好的警告信息

React - 通过道具

5 个答案: