reactjs重置组件的道具将接收道具

我第一个项目的第一个问题

我试图找出如何在特定的onClick链接上对组件产生最佳效果，以便能够重新触发此效果，而不受页面上其他链接的影响。前两个问题是有效的，但我似乎没有其他链接不影响组件

我的页面上有一个DisplayLightbox组件，它接受两个值

<div>
  <DisplayLightbox 
    showLightbox = {this.state.showLightbox} 
    lightboxValue = {this.state.travelCity}  
  /> 
</div>

在我的DisplayLightbox组件中，componentWillReceiveProps确实将state设置为true，这在div中添加了lb active类，该类从css中显示lightbox div。这似乎很好

class DisplayLightbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    showLightbox: false, 
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.showLightbox !== this.state.showLightbox) {
      this.setState({ showLightbox: nextProps.showLightbox });
    }
  } 

  closeLightbox() {
    this.setState({
      showLightbox: false,
    });
  }

  render() {
    var lbActive = (this.state.showLightbox === true) ? "lb-active" : "" 
    return <div className={"lightbox " + lbActive }>
    <div className={"lightbox-close " + lbActive }  onClick={() => 
  this.closeLightbox()}>CLOSE</div>
    Copy in lightbox
    </div>;
  }
}

类DisplayLightbox扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
展示灯箱：错误，
};
}
组件将接收道具（下一步）{
if（nextrops.showLightbox！==this.state.showLightbox）{
this.setState（{showLightbox:nextrops.showLightbox}）；
}
} 
closeLightbox（）{
这是我的国家({
展示灯箱：错误，
});
}
render（）{
var lbActive=（this.state.showLightbox==真）？“lb active”：
返回
this.closeLightbox（）}>CLOSE
在灯箱中复制
;
}
}

查看它，我发现由于道具不受组件控制，并且是只读的，因此一旦设置为True，并且我通过将showLighbox的状态设置回false来关闭div，nextrops.showLighbox仍然为True。因此，如果我关闭它（closeLightbox）并单击页面上的另一次单击，它仍然会查看我的组件，看到nextProps.showLightbox仍然设置为TRUE并打开lightbox

我只想打开灯箱，如果特定的链接是一个被点击虽然。如果其他链接都将showLightbox的状态设置为false，那就太过分了，所以我猜我没有正确地看待这个问题

---

谢谢

您可以将您的

closeLightbox

方法移动到上部组件，并从父级管理

showLightbox

道具。然后组件

DisplayLightbox

将有3个道具：

showLightbox

、

travelCity

和方法

closeLightbox

当您将关闭灯箱移动到父组件时，事件

组件将不再需要接收道具

让其他每一个链接都设置
showLightbox为false，所以我猜我不是在看这个
对

那么，为什么不只配置一个要打开/关闭灯箱的链接呢

在我看来，从父组件或外部组件获取其活动状态的组件不应该费心在其自身状态下对其进行管理。

您可以在父级状态下管理开/关状态，并将
isOn
和
onClose
事件处理程序传递给
LightBox


单击
LightBox
后，它将调用传递给它的处理程序，并且父级将
isOn
的状态更改为
false
，这将为
LightBox
触发一个新属性为
isOn
的渲染，这次它的值为
false


单击外部
链接
/
按钮
时，家长将收听该链接并将
isOn
的状态更改为
true
，然后再次将
isOn
传递到
LightBox
，其新值为
true

小例子：


const cities=[“纽约”、“tlv”、“方舟”]；
类按钮扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
}
onClick（）{
const{item，onClick}=this.props；
点击（项目）；
}
render（）{
返回{this.props.children}；
}
}
类LightBox扩展React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
}
onClick（）{
const{city，onClick}=this.props；
onClick（城市）；
}
render（）{
const{isOn}=this.props；
const css=`lightBoxStyle${isOn&&“onStyle”}`；
返回(
|
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
turnedOn:[]
};
this.on=this.on.bind（this）；
this.off=this.off.bind（this）；
}
关于（城市）{
const{turnedOn}=this.state；
if（turnedOn.find（c=>c==city））{
返回；
}
const nextState=[…特内顿，城市]；
this.setState（{turnedOn:nextState}）；
}
关（城市）{
const nextState=this.state.turnedOn.filter（c=>c！==city）；
this.setState（{turnedOn:nextState}）；
}
render（）{
const{turnedOn}=this.state；
返回(
{cities.map（（city，i）=>{
const isOn=turnedOn&&turnedOn.包括（城市）；
返回(

关上灯！
);
})}
);
}
}
render（，document.getElementById（“根”））
.lightBoxStyle{
边框：1px实心#eee；
宽度：30px；
高度：30px；
文本对齐：居中；
盒影：0 0 4px 1px#222；
边界半径：50%；
保证金：0自动；
光标：指针；
}
onStyle先生{
背景色：#333；
颜色：#fff；
}
基于这些精彩的回复，我把孩子的照片收尾，然后又回到了父母那里。
为此，我向父对象添加了一个lightbox按钮div

        <div className={"lightbox-button " + this.state.showLightbox} onClick={() => this.showLightbox()}></div>

       <DisplayLightbox 
       showLightbox = {this.state.showLightbox} 
      lightboxValue = {this.state.travelCity}  /> 

}

使用css，我会隐藏这个lightbox按钮，除非this.state.showLightbox为true。发生这种情况时，将显示该按钮，并在单击时切换showLightbox状态，从而删除灯箱和按钮

不确定这是否是理想的解决方案，但似乎有效。
非常感谢您的快速回复。我向父级添加了一个按钮div，用于切换showLightbox状态，正如您所说，我能够删除
        <div className={"lightbox-button " + this.state.showLightbox} onClick={() => this.showLightbox()}></div>

       <DisplayLightbox 
       showLightbox = {this.state.showLightbox} 
      lightboxValue = {this.state.travelCity}  /> 

  showLightbox(travelCity){
this.setState({
  showLightbox: !this.state.showLightbox,
  travelCity: travelCity,
});