javascript - 无法将属性从父级发送到子级
问题描述
单击该项目时,我无法将所需的属性从父级发送给子级。由于某种原因,它被打印在 Brewery 的主页上;但不在 DetailPage 上。似乎 DetailPage 无法读取道具,因为我得到“无法读取未定义的属性'名称'”。
Brewery.js
render() {
const { breweries } = this.state;
return(
<div>
<div className="main-container">
<div className="banner">
<div className="banner-content">
<h1>Brewery</h1>
<p>Find the best brewery in town</p>
</div>
</div>
<div className="container">
<div className="brewery-sort">
<ButtonToolbar>
<DropdownButton
bsStyle="default"
title="Sort"
noCaret
id="dropdown-no-caret"
>
<MenuItem onClick={() => this.sortAlpha()}>Alphabetically (A-Z)</MenuItem>
<MenuItem onClick={() => this.sortRevAlpha()}>Alphabetically (Z-A)</MenuItem>
</DropdownButton>
</ButtonToolbar>
</div>
<div className="row">
{breweries.slice(0, 10).map((brewery, i) =>
<div className="col-xs-12 col-sm-4" key={i}>
<Link to={`/brewery/${ brewery.id }`}>
<div className="card">
<div className="card-description">
<h2>{brewery.brewery_type}</h2>
<p>{brewery.city}, {brewery.state}</p>
</div>
<div className="card-name"><img src="https://img.icons8.com/color/20/000000/beer.png" alt="beer"/> {brewery.name}</div>
</div>
<DetailPage brewery={brewery} />
</Link>
</div>
)}
</div>
</div>
</div>
</div>
)
}
DetailPage.js
render() {
const { id, state } = this.state.brewery;
const breweries = this.state.breweries.filter(brewery => brewery.id !== id && brewery.state === state);
return (
<div className="background">
<div className="details">
<p>Name: {this.props.brewery.name}</p>
<p className= "category">Category: {this.props.brewery.brewery_type}</p>
<p>Address: {this.props.brewery.street}, {this.props.brewery.city}, {this.props.brewery.state}, {this.props.brewery.postal_code}, {this.props.brewery.country}</p>
<p>Phone Number: {this.props.brewery.phone}</p>
<p>Website: <a href={this.props.brewery.website_url} target="_blank" rel="noopener noreferrer">{this.props.brewery.website_url}</a></p>
</div>
<div className="recommendations">Recommendations</div>
<div className="container">
<div className="row">
{breweries.slice(0,3).map(brewery => (
<div className="col-xs-12 col-sm-4" key={brewery.id}>
<Link to={`/brewery/${ brewery.id }`} onClick={ this.reloadPage.bind(this)}>
<div className="card">
<div className="card-description">
<h2>{brewery.brewery_type}</h2>
<p>{brewery.city}, {brewery.state}</p>
</div>
<div className="card-name"><img src="https://img.icons8.com/color/20/000000/beer.png" alt="beer"/> {brewery.name}</div>
</div>
</Link>
</div>
))}
</div>
</div>
</div>
);
}
解决方案
您的详细信息页面中有一些错误,您正在将道具传递给子组件,但您指的是代码示例中的内部状态。这是一个基本示例,它基本上重新创建了您正在尝试做的事情。
注意我们如何使用this.props
而不是this.state
. 请记住,子组件依赖于传递给组件的状态。
class Brewery extends React.Component {
// ... all your other methods
render() {
return (
<div>{this.props.data.name}</div>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
breweries: [
{
id: 1,
name: 'Guniness',
},
{
id: 2,
name: 'Brewdog',
}
]
};
}
render() {
return (
<div>
{this.state.breweries.map((brewery) => (
<Brewery key={brewery.id} data={brewery} />
))}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- python - 无法刮取所有产品色板
- python-3.x - 如果 k,则在大小为 n 的列表的第 k 个位置添加元素的最佳方法
我知道可以通过重新定义列表并添加三个列表来在列表中添加一个元素,而不是作为第一个元素或最后一个元素:
# I want to add 5 into [1,2,3,4,6,7,8,9,0] between the 4 and the 6 A=[1,2,3,4,6,7,8,9,0] A=[1,2,3,4]+[5]+[6,7
- r - 根据条件与 R 中的其他数据集创建变量
- mysql - NodeJS xdevapi - 创建与 MySQL 数据库的连接
- javascript - 按内容选择消息(discord.js)
- c# - 为什么简单程序的bin输出中有这么多DLL
- java - 如何实现 java tic tac toe 游戏功能
- python-3.x - 使用 Pandas 根据条件按一列分组并前向替换多列中的值
- oracle-apex - 尽管已定义 Oracle Apex-Cant 查找区域按钮
- django - Django覆盖模型保存方法返回旧数据