Question

React的新手如此挣扎。

我想根据所选的类别更改列表，但是Categories组件由App组件调用的Listing组件调用。

-App.js
 -Listing.js
  -Categories.js

我最初在app.js文件中设置selectedCategory的状态，它按预期工作，但我想更新此状态。我可以更新类别组件中的状态，但这只会更新<Category>元素上的状态。我想更新状态“全局”，以便我可以随处访问它。

这是Categories.js组件：

import React, { Component } from 'react';

class Categories extends Component {


handleCategoryClick = (id, e) => {
    console.log(id);

    this.setState({ selectedCategory:id });

}

render() {

return (
    <div className="tour-categories">

        <ul className="tour-categories-list">
            <li onClick={(e) => this.handleCategoryClick(1, e)}>Food &amp; Drink</li>
            <li onClick={(e) => this.handleCategoryClick(2, e)}>Whisky Distilleries</li>
            <li onClick={(e) => this.handleCategoryClick(3, e)}>TV &amp; Film Location</li>
            <li onClick={(e) => this.handleCategoryClick(4, e)}>City Tour</li>
            <li onClick={(e) => this.handleCategoryClick(5, e)}>Castles</li>
            <li onClick={(e) => this.handleCategoryClick(6, e)}>Golf </li>
            <li onClick={(e) => this.handleCategoryClick(7, e)}>Shopping</li>
            <li onClick={(e) => this.handleCategoryClick(8, e)}>Out Door Activities</li>
            <li onClick={(e) => this.handleCategoryClick(9, e)}>Spa &amp; Wellness</li>
            <li onClick={(e) => this.handleCategoryClick(10, e)}>Boat Tours &amp; Water Sports</li>
            <li onClick={(e) => this.handleCategoryClick(11, e)}>Zoo &amp; Aquariums</li>
        </ul>

    </div>
)
}
}

export default Categories;

Listing.js组件：

import React, { Component } from 'react';
import Categories from './Categories.js';

class Listing extends Component {

render() {

return (
    <div>

        <Categories />

    </div>
)
}
}

export default Listing;

App.js组件（相关部分）

class App extends Component {

state = {
 tours: {},
 selectedCategory: ""
};

loadData() {
fetch(API)
  .then(response => response.json())
  .then(json => {
      console.log(json);
      this.setState({
        tours: json
    });
  })

}

 componentDidMount() {

 this.loadData();

}


render() {
 return (

    <div className="tour-container">

      <Listing />

     </div>
    );
  }
}

export default App;

感谢。

Answer 1

您需要通过道具传递您选择的类别

在App中有类似的东西：

<Listing selected={this.state.selectedCategory} />

然后在您的清单中，将其传递给您的类别

<Category selected={this.state.selectedCategory} />

使用类别（或列表）

中的this.props.selectedCategory访问它

如果您需要从类别更新 - ＆gt;

<Category selected={this.state.selectedCategory} onUpdate={this._handleUpdate} />

处理变更：

function _handleUpdate(updatedValue){
  this.props.onUpdate(updatedValue);
}

在清单中做同样的事情，回到App。

在清单中的onUpdate时更新app中的状态。

你完成了！ ;）

文件： https://reactjs.org/docs/components-and-props.html

内联函数的一些解释： https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Answer 2

您需要将其传递给您的子组件

也在

在类别中你定义回调函数更新数据然后它传递给你的列表然后应用程序所以app我们可以访问它作为道具所以应该功能

从组件2层深

2 个答案: