我有一个父组件[MainLayout],它有一个子组件[ListItems],并且有多个子组件[ListItem]。
/* index.js */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute } from 'react-router'
import ListItems from './components/listitems';
class MainLayout extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
selectedItem: null
};
this.getTracks = this.getTracks.bind(this);
this.listItemClicked = this.listItemClicked.bind(this);
this.getTracks();
}
listItemClicked(item) {
console.log(item);
}
getTracks() {
fetch('https://api.spotify.com/v1/search?q=newman&type=track&market=US')
.then((response) => response.json())
.then((responseJson) => {
this.setState({items: responseJson.tracks.items});
console.log(responseJson);
return responseJson;
});
}
render() {
return (
<div>
{this.props.children && React.cloneElement(this.props.children, {
items: this.state.items,
onListItemClicked: this.listItemClicked
})}
</div>
);
}
}
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ListItems onListItemClick={this.props.onListItemClicked} items={this.props.items} />
</div>
);
}
}
/* listitems.js */
import React, {Component} from 'react';
import ListItem from './listitem';
const ListItems = (props) => {
const allitems = props.items.map((item) => {
return (
<ListItem onListItemClick={props.onListItemClick} item={item} key={item.id} />
)
});
return (
<ul className="list-group">
{allitems}
</ul>
);
}
export default ListItems;
/* listitem.js */
import React, {Component} from 'react';
class ListItem extends Component {
constructor (props) {
super(props);
}
render() {
return (
<div className="">
<h4 onClick={this.props.onListItemClick}>{this.props.item.album.artists['0'].name} - {this.props.item.name}</h4>
</div>
);
}
}
export default ListItem;
谢谢你的回答!
你想要的解决方案可以在这里找到。
但我建议您使用任何单独的架构,如Redux或Flux。我知道你想要一个开销更少的答案,但是相信我,使用它将为你节省大量的时间,并且它们能有效地处理每一个状态。我将谈论Redux,因为我只工作过Redux。
您需要的所有数据都存储在Redux存储库中,可以从任何页面访问、更改。当您想要更改任何属性时,有一个名为dispatch()
的可用方法可以帮助您这样做。为了访问存储区中的值,可以使用@connect()
修饰符。
要了解@connect()装饰器,请参阅此链接。
Redux和Flux之间的区别可以在这里和这里找到。
我有一个父组件从API获取一些数据,并将数据存储在状态中,然后将其传递给子组件,如下所示: 在我的子组件中,我有两个问题,一个是:我想在componentDidMount中接收一个道具(ratingsAverage),但在render()函数中接收ratingsAverage时未定义。另一个是:在我的render()函数中,我只能接收非对象或数组的数据,当我接收到一个对象并希望访问该对象的属性时,
如何在Children内部拿到父级的ref? 父级是不同的组件
我对反应很陌生。js和我一直在研究一个组件类(子类),该类具有函数和单个状态对象,我的最终目标是在父类中使用该类,以便它可以调用其函数并更新状态。 我遇到的问题是: 我不知道组件的生命周期,并且 我有着深厚的文化背景 意思:我一直像对待任何C#类而不是JavaScript一样对待这些组件类。我现在知道了。 但我需要帮助评估我的方法并解决我一直看到的这个问题: 这是我的子类组件 从“React”导入
问题内容: 以下是在reactjs中将值从子组件传递到父组件的正确示例。 App.jsx main.js 我需要明确有关将值从子组件传递到祖父母组件的概念。请帮我!! 问题答案: 您可以通过,将update函数传递给大子级,只需从子组件中再次传递即可。
父组件 子组件 为什么执行getSonData的时候,无法获取到子组件的data?sonRef.value.data只能在onMounted内使用吗?不能在父组件的方法里执行?
我已经创建了一个按钮和文本组件,并将它们包含在搜索组件中。现在,我想用搜索组件的处理程序覆盖按钮的默认handleClick事件。但this.handleClick指向按钮组件的事件处理程序。。请帮忙。。我需要从搜索中单击,而不是从按钮中获取。。