react.js获取父组件中的子值

Question

我有一个父组件[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;

谢谢你的回答！

Answer 1

你想要的解决方案可以在这里找到。

但我建议您使用任何单独的架构，如Redux或Flux。我知道你想要一个开销更少的答案，但是相信我，使用它将为你节省大量的时间，并且它们能有效地处理每一个状态。我将谈论Redux,因为我只工作过Redux。

您需要的所有数据都存储在Redux存储库中，可以从任何页面访问、更改。当您想要更改任何属性时，有一个名为dispatch()的可用方法可以帮助您这样做。为了访问存储区中的值，可以使用@connect()修饰符。

要了解@connect()装饰器，请参阅此链接。

Redux和Flux之间的区别可以在这里和这里找到。