Javascript 在React组件之间共享状态_Javascript_Reactjs

Javascript 在React组件之间共享状态

javascript reactjs

Javascript 在React组件之间共享状态,javascript,reactjs,Javascript,Reactjs,我有一个表组件（父级），在表的每一行中，还有另一个组件，基本上是一个图像按钮（子级）。单击时，图像按钮将从默认的三个垂直点（）切换为下载图标。三个垂直点图像有一个onClick侦听器，可将其切换到下载图标，下载图标有一个onClick侦听器，可下载表行中的文件。每个图像按钮都有自己的状态（基于要显示的图像）。在table组件中，我有一个div来包装整个屏幕。当这个div被点击时（基本上如果你点击图像之外的任何地方），我希望能够将表中的所有图像重置回三个点。我不确定如何实现这一点，因为有很多子组件

我有一个表组件（父级），在表的每一行中，还有另一个组件，基本上是一个图像按钮（子级）。单击时，图像按钮将从默认的三个垂直点（）切换为下载图标。三个垂直点图像有一个onClick侦听器，可将其切换到下载图标，下载图标有一个onClick侦听器，可下载表行中的文件。每个图像按钮都有自己的状态（基于要显示的图像）。在table组件中，我有一个div来包装整个屏幕。当这个div被点击时（基本上如果你点击图像之外的任何地方），我希望能够将表中的所有图像重置回三个点。我不确定如何实现这一点，因为有很多子组件，每个子组件都有自己的状态（因此我认为redux不起作用）。是否有办法与表格组件共享每个图像按钮的状态

下面是一些表格代码

this.resetDownloads（）}>
this.props.songs.data.map（（歌曲，索引）=>
{song.name}
{宋。艺术家}
{song.duration}

这就是您的位置。实际上，首先，您不需要

ActionButton

组件中的状态。它应该是无状态组件。您可以将所有数据保留在父组件中

假设歌曲数据中有一个

id

属性。您可以跟踪父组件中的

downloadState

，并将此歌曲的

id

添加到此状态对象。然后您可以将此值传递给

ActionComponent

并使用它。此外，您还可以将所有函数保留在父组件中

const歌曲=[
{id:“1”，名称：“始终蓝色”，艺术家：“切特·贝克”，持续时间：“07:33”}，
{id:“2”，名称：“感觉良好”，艺术家：“尼娜·西蒙娜”，持续时间：“02:58”}，
{id:“3”，名字：“那又怎样”，艺术家：“迈尔斯·戴维斯”，持续时间：“09:23”}，
]
类应用程序扩展了React.Component{
状态={
下载状态：{}，
}
切换=（e，id）=>{
e、 停止传播（）；
this.setState（prevState=>({
下载状态：{…prevState.downloadState，[id]：！prevState.downloadState[id]}
}))
}
下载歌曲=（e，歌曲）=>{
e、 停止传播（）；
警报（song.name）；
}
resetDownloads=（）=>this.setState（{downloadState:{}）；
render（）{
返回(
{
歌曲地图（（歌曲，索引）=>(
{song.name}
{宋。艺术家}
{song.duration}
))
}
)
}
}
const ActionButton=props=>{
const{downloadState，downloadSong，song，toggle}=props；
const handleToggle=e=>toggle（e，song.id）；
const handleDownload=e=>下载歌曲（e，歌曲）；
常量渲染=（）=>{
让图像=”；
if（下载状态[song.id]）{
图片=下载；
}否则{
图像=点；
}
返回图像；
}
返回(
{renderImages（）}
);
}
ReactDOM.render（，document.getElementById（“根”）；

表，th，td{
边框：1px纯黑；
}