Reactjs 在没有redux和context API的情况下，如何在不同的3级react组件中传递参数？

假设我在react应用程序中有3个组件应用程序组件、项目组件和项目组件

我的状态在应用程序组件中。现在我想通过id从状态中删除一个项。onClick函数位于item组件中。Item组件的id将从throw Items组件转到App组件

---

我使用.bind方法尝试了它，并设法将数据项传递给项。

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

---

一般来说，我认为Items组件应该包含状态和功能，而不是App组件，也不是Item组件，它只是一个UI组件（无状态组件）。这样，无论何时删除项目，项目组件都会因为状态的更改而重新呈现自身。

您不需要为此进行重新渲染。上下文很好，但也不是必需的。我更喜欢上下文。但是，您可以通过以下方式不使用它们：

// 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} />
  }
}

//App.js
类应用程序扩展组件{
状态={items:…etc}；
handleItemClick=（id）=>无论什么
render（）{
返回
}
}
//Items.js
类项扩展组件{
render（）{
返回此.props.items（item=>）；
}
}
//Item.js
类项扩展组件{
handleClick=（）=>{
this.props.onClick（this.props.id）；
}
render（）{
返回
}
}

请提供一些您尝试过的代码，包括应用程序、项目、项目组件。在React时，请记住一句话：数据关闭，操作启动您不需要上下文。如果

状态

位于

中，则在

中定义更新状态的

删除项（项）

。将

deleteItem

向下传递到

谢谢，@Tomer。但是，我的项目是按项目组件包装的，并从同一组件的道具中获取数据。所以这可能是不可能的。第二，我知道我应该把我的状态保存在项目中。我甚至可以使用上下文api。但我正在学习如何将函数作为道具发送，并在2级以上的组件中获取参数。