javascript - 未捕获的类型错误:无法读取 ReactJs 中 {Component}.render 处未定义的属性“映射”
问题描述
我正在将我的数组传递给侧边栏组件的道具,就像这样。我想在我的子组件中访问它......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './styles.scss';
import Sidebar from './../../components/sidebar';
import Header from './../../components/header';
export default class Dashboard extends Component {
buildComponent = props => {
console.log("Props", props.children);
var items = [
{
"link": "facebook.com",
"title": "Facebook"
},
{
"link": "google.com",
"title": "Google"
}
]
return (
<div>
<Header />
<div className="container-fluid">
<div className="row">
<Sidebar name={items} />
<div className="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{props.children}
</div>
</div>
</div>
</div>
);
}
render() {
return this.buildComponent(this.props);
}
}
Dashboard.propTypes = {
children: PropTypes.any
};
并且想要子组件中的道具数据..
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
export default class Sidebar extends Component {
constructor() {
super();
}
render() {
return (
<div className="row">
<div className="col-sm-3 col-md-2 sidebar">
<ul className="nav nav-sidebar">
<li><a href="#">Dashboard</a></li>
<li className="fa fa-plus"><Link to="/feed">For Your Approval</Link></li>
<li><Link to="/article">Active</Link></li>
<li><a href="">{this.props.items.map((title) => <li>{title}</li>)}</a></li>
<li><a href="#">Rejected</a></li>
<li><a href="#">Send For Approval</a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Archied</a></li>
</ul>
<ul className="nav nav-sidebar">
<li><a href="">Brand Safety</a></li>
<li><a href="">Report</a></li>
</ul>
</div>
</div>
);
}
}
我正在关注教程,但收到此错误,我是 reactjs 新手,请帮助....
解决方案
您没有将“项目”道具传递给侧边栏。你只是传递名字。你需要做<Sidebar items={items}>
推荐阅读
- laravel - 在 Laravel 中将 Customer FormRequest 传递给 GET
- python - Tensorflow.py 受保护的部门
- python-3.x - 抓取时如何使用条件语句?
- json - 离子离子选择选项不在动态 json 中显示
- php - “new PDO()”命令的“找不到驱动程序”错误,PHP 7.0.25
- reactjs - 如何修复基于 Web 令牌的 React Redirect 语句的三元
- python - 你如何在 python 3 中使用 os.rename() 函数?
- python - 如何使用 sympy/python 找到给定根的多项式
- javascript - 如何让两个 iframe 进行通信?
- c# - C# Cognex,为什么他说空引用异常