Question

我很反应并尝试使用道具从文件中访问json数据。

Header.js

import React from 'react';
export const Header = props => (
<div className="curator-info col-lg-8 col-md-8 padLeft">
   <p><span id="curator-info-tagline">List Curated by:</span><br/>
   <span id="curator-info-name">{props.user_first_name} {props.user_middle_name} {props.user_surname}
   </span></p>
</div>      
);
export default Header;

restraunts.js

const restraunts = [
{  
    id:12,
    user_first_name:'Illias',
    user_middle_name:'',
    user_surname:'Dcruze',
},
];
export default restraunts;

Layout.js

import React from 'react';
import { Link } from 'react-router-dom';
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
import restraunts from '../../data/restraunts.js';

export const Layout = props => (
<div className="app-container">
<Header />
<Footer />
</div>
);

export default Layout;

在某处我读取了在componentmount函数中获取数据，但我想只有使用react.component创建一个类才有可能

尝试了这个以及其他选项：

In header.js
export const Header = ({restraunts}) => (

In Layout.js
< Header restraunts={restraunts} />

查询： 1）这里应打印props.user_first_name，但我在前端未定义（未定义错误但span标记为空）。

编辑1：正如答案中所建议的，我应该循环。我发现在Layout.js文件中调用它时我也应该将props作为参数传递

Answer 1

您应该遍历restraunts数组以显示每个数组及其值。

Header.js：

import React from 'react';
export const Header = props => (
<div className="curator-info col-lg-8 col-md-8 padLeft">
   <p><span id="curator-info-tagline">List Curated by:</span><br/>
   {props.restraunts.map((restaurant, index) => 
       <span key={index} id="curator-info-name">{restaurant.user_first_name} {restaurant.user_middle_name} {restaurant.user_surname}
       </span>
   )}</p>
</div>      
);
export default Header;

反应

1 个答案: