- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
新的 React 并尝试传递,props 到具有 React 的组件。但在 Track.js 中接收 {this.props.name}
时得到 undefined
结果。和 TypeError: Cannot read property 'name' of undefined
在 Track.js 渲染方法中尝试使用 {this.props.track.name}
时。
它应该呈现这些轨道:
tracks: [{
name: 'Gold Slug',
artist: 'DJ khaled',
album: 'We da best',
id: '102 sample ID'
},
{
name: 'Slim shady',
artist: 'Eminem',
album: 'Marshal materials',
id: '103 sample ID'
}
或此轨道:
searchResults: [{
name: 'You Mine',
artist: 'DJ Khaled',
album: 'I Changed a Lot',
id: '101 sample ID'
}],
背景信息:构建一个应用程序来呈现带有名称、艺术家和专辑的歌曲轨道。还有一个带有搜索结果和播放列表的搜索。我正在使用 6 个组件:App、PlayList、SearchBar、SearchResults、Track 和 TrackList。
应用程序是一个容器。 PlayList 允许用户向其中添加轨道。 SearchResults 显示来自 SearchBar 的结果。
在 App.js 中,我在构造方法中设置了 searchResults 的状态并将其传递给组件。
应用程序.js:
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar'
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [{
name: 'You Mine',
artist: 'DJ Khaled',
album: 'I Changed a Lot',
id: '101 sample ID'
}],
tracks: [{
name: 'Gold Slug',
artist: 'DJ khaled',
album: 'We da best',
id: '102 sample ID'
},
{
name: 'Slim shady',
artist: 'Eminem',
album: 'Marshal materials',
id: '103 sample ID'
}
]
};
}
render() {
return (
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div className="App">
<SearchBar />
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults}/>
<Playlist />
</div>
</div>
</div>
);
}
}
export default App;
SearchResults 接收并 .map 遍历数组并将其设置为在 render 方法中的 TrackList 组件中的轨道。
搜索结果.js:
import React from 'react';
import './SearchResults.css'
import TrackList from "../TrackList/TrackList";
import Track from "../Track/Track";
class SearchResults extends React.Component {
render() {
return (
//Adds a map method that renders a set of Track components on the tracks attribute.
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults.map(track => {
return <Track key={track.id} /> }
)} />
</div>
)
}
}
export default SearchResults;
TrackList.js 渲染一组轨道组件:
import React from 'react';
import './TrackList.css'
import Track from '../Track/Track'
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
<Track />
<Track />
<Track />
<Track />
</div>
)
}
}
export default TrackList;
Track.js 呈现轨道:
import React from 'react';
import './Track.css'
class Track extends React.Component {
renderAction() {
if (this.props.isRemoval == true) {
return <h1>-</h1>;
} else {
return <h1>+</h1>;
}
}
//TODO: Fix rendering method on this.props.track.name
render() {
return (
<div className="Track">
<div className="Track-information">
<h3>{this.props.name}</h3>
<p>{`${this.props.artist} | ${this.props.album}`}</p>
</div>
<a className="Track-action" isRemoval={true}></a>
</div>
)
}
}
export default Track;
最佳答案
这里的问题是您实际上并没有将数据传递给 Track
成分。
class SearchResults extends React.Component {
render() {
return (
//Adds a map method that renders a set of Track components on the tracks attribute.
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults.map(track => {
return <Track key={track.id} /> }
)} />
</div>
)
}
}
好像SearchResults
正在尝试映射通过 Prop 获取的数据,并呈现 Track
为每一个。现在,如果您查看此处的这一行,您会注意到实际上没有传递任何数据。
return <Track key={track.id} /> }
我认为要解决您的问题,您需要做的就是这个。
class SearchResults extends React.Component {
render() {
return (
//Adds a map method that renders a set of Track components on the tracks attribute.
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults.map(track => {
return <Track key={track.id} track={track} /> }
)} />
</div>
)
}
}
现在在Track
您可以访问的组件 this.props.track.whatever
.
关于javascript - 将 Prop 传递给 sibling reactJS 时未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53643624/
我一直在使用 angular-ui-router 并尝试从同一抽象的另一个 child 中转换到我的一个抽象状态的 child 。这张图更好地展示了这个想法: 所以“R”是模块,“蓝色 1”是我的抽象
很难解释我遇到的这个问题,因为有很多变数。 我的网站使用 javascipt 根据屏幕分辨率调整固定包装的大小,因此所有 div 都必须调整为 3 种不同的宽度,这就是使这个问题如此困难的原因.. H
我必须选择h1节点之间的所有内容。 Index some content some more content Index 2 some content other content Index 3 s
我目前正在使用已使用自定义 xml 转换器转换为 xml 的 VDA 消息类型。但是,源文档中的每个标题和行记录都处于同一级别,如下面的示例所示: 512
我需要查明 Table_3 是否包含属于某个父级的子级的所有 sibling 。例如,我询问 12 号 child (家长 1 = Charles)。 Table_2 告诉我他还有 2 个 sibli
所以我想选择一组元素中的最后一个兄弟元素,但是父容器中有多个元素。 Some text 所以在这种情况下,对于每一 block .select
我正在尝试为我的网站做一种 Accordion ,类似于 this website 上的那个。 , 但没有切换。 我正在使用的代码是 here . 我有基本的设置工作,但我似乎无法让 li 的高度正确
我很难尝试实现 XSL 转换。 我需要改变这个: 1 Homepage AB308E 5
我正在尝试创建一个爬虫来从供应商网站中提取一些属性数据,我可以根据我们的内部属性数据库对其进行审核,并且是 import.io 的新手。我看了一堆视频,虽然我的语法似乎是正确的,但我的手动 xpath
这是我的 xml 的摘录: content content 我定位在node[@id='1'] .我需要一个 Xpath 来匹配所有 元素直到下一个非空节点(这里是 node[@id='
我正在使用 Selenium-Python 来抓取此链接中的内容。 http://targetstudy.com/school/62292/universal-academy/ HTML代码是这样的,
这个问题在这里已经有了答案: Is there a CSS parent selector? (33 个答案) 关闭 4 年前。
代码笔:https://codepen.io/andrelange91/pen/VyjYBg 我做了以下声级示例,它应该在悬停时填充其他条。但目前是落后的...而且我一直没能找到一种方法(尽管我敢打赌
在下面的示例中,我试图获取所有 之前(包括当前的 ) class="current"具有番茄背景色。 所以在这个例子中:1、2、3、4 和 5 的背景颜色是番茄。 如果 我需要它来更新那class
在下面的例子中, h2 p p p h2 p p p h2 我只想在 h2.first 和 h2.second 之间选择 p。我试过 select si
对于下面的示例 HTML,返回具有 class='A' 和 class='B' 的“a”元素的 sibling 的 XPath 查询可以写为://a[@class='A']/following-sib
鉴于此 XML/HTML: Label1Value1 Label2Value2 Label3Value3aValue3b Label4Value4 我想找到所有 ,然后为每个找到
这是我在 StackExchange 的第一篇文章,如果我做错了什么,请多多包涵: 我有一个从产品数据库派生的 XML 文件,其中所有分组信息都丢失了,除了元素的顺序。所有产品都有一个首先出现的商品编
我希望以易于理解的方式描述我的问题。 我的 html 看起来像这样: AAAA BBBB 我想要 TextArea 的 Xpath(其中标签的值为 AAAA)用 Sel
我是一名优秀的程序员,十分优秀!