reactjs - 如何在没有 redux 和 context API 的情况下在不同的 3 级反应组件中传递参数？

Question

假设我在一个 React App 中有 3 个组件。App组件、Items组件和Item组件。

我的状态在 App 组件中。现在我想通过 id 从状态中删除一个项目。onClick 函数在 Item 组件中。Item 组件的 id 将 Items 组件扔到 App 组件。

我已经使用 .bind 方法进行了尝试，并设法将数据项 2 传递给项。

Answer 1

您不需要为此而使用 redux。上下文很好，但也不是必需的。我更喜欢上下文。但是你可以通过以下方式在没有它们的情况下做到这一点：

// App.js
class App extends Component {
  state = { items: ...etc };

  handleItemClick = (id) => whatever

  render() {
    return <Items items={this.state.items} onItemClick={this.handleItemClick} />
  }
}

// Items.js
class Items extends Component {
  render() {
    return this.props.items(item => <Item key={item.id} id={item.id} onClick={this.props.onItemClick} />);
  }
}

// Item.js
class Item extends Component {
  handleClick = () => {
    this.props.onClick(this.props.id);
  }

  render() {
    return <whatever onClick={this.handleClick} />
  }
}

Answer 2

您可以执行以下操作 - 将 onClick 函数作为道具从“App”组件传递给“Item”组件，这样您就可以访问 App 组件中的状态，并从组件向其传递 id 参数使用该功能。

一般来说，我认为 Items 组件应该保存状态和功能，而不是 App 组件或只是 UI 组件（无状态组件）的 Item 组件。这样，每当您删除一个项目时，Items 组件都会因为状态的变化而重新渲染自己。