如何将含对象的JavaScript文件传入React组件

嘿，我一眼就看出问题出在哪了！你的Test组件里的render方法写法不对——React组件的render函数是不接收props参数的，组件的props是通过this.props来访问的。

问题所在 #

你当前的Test组件render方法写了render(props)，这里的props其实是undefined，因为React不会把props传给render函数，所以你自然拿不到传入的数据。

修正后的Test组件代码 #

把render方法的参数去掉，改用this.props来访问传入的数据：

import React, { Component } from 'react';

class Test extends Component {
  render() {
    // 这里用this.props获取传入的data
    console.log(this.props.data);
    return (
      <div>
        {/* 注意：直接渲染对象会显示[object Object]，可以转成JSON或者渲染具体属性 */}
        <h3>{JSON.stringify(this.props.data)}</h3>
        {/* 或者渲染具体属性，比如客户名称 */}
        <p>客户名称：{this.props.data.customerName}</p>
        <p>设备ID：{this.props.data.deviceId}</p>
      </div>
    );
  }
}

export default Test;

其他确认点 #

• 你的data.js导出是没问题的：既做了命名导出export const data，又做了默认导出export default data，所以App.js里的import data from './data'是正确的。
• App.js里传递props的写法<Test data={data}/>也是完全正确的，不用修改。

这样修改之后，你就能正常拿到传入的数据啦！

内容的提问来源于stack exchange，提问作者Joe Escobedo