Reactjs重置道具的组件WillReceiveProps

Question

我第一个反应项目的第一个问题。

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

我有一个DisplayLightbox组件在我的页面上接受几个值

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

我想要触发lightbox的链接正在调用一个设置状态（并发送道具）的函数。这部分似乎很好用。

onClick={() => this.showLightbox(el.field_city)}

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

在我的DisplayLightbox组件中，组件WillReceiveProps确实将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>;
  }
}

研究一下，我发现由于道具不受组件和只读控制，一旦它被设置为True，我通过将show Lighbox的状态设置为false来关闭div，下一个Props.showLightbox仍然是true。因此，如果我关闭它（CloseLightbox），并单击不同的点击我的页面，它仍然会查看我的组件，看到nextProps.showLightbox仍然设置为TRUE并打开Lightbox。

我只想打开灯箱，如果那个特定的链接是被点击的。让每一个其他链接都将show Lightbox的状态设置为假似乎有些过分，所以我想我没有正确地看待这个问题。

谢谢

Answer 1

基于这些精彩的回复，我把孩子的照片收了出来，然后又回到了父母的身边。为此，我向父对象添加了一个lightbox按钮div

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

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

这将调用与showLightbox相同的函数，我稍微修改了它以进行切换

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

}

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

不确定这是否是理想的解决方案，但似乎有效。

Answer 2

如果其他链接都将showLightbox的状态设置为false，那就太过分了，所以我猜我没有正确地看待这个问题。

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

在我看来，从父组件或外部组件获取其活动状态的组件，不必费心在自己的状态下管理它。
您可以在父级状态下管理开/关状态，并将isOn和onClose事件处理程序传递给LightBox
单击LightBox后，它将调用传递给它的处理程序，父级将更改事件的状态isOn到false，这将为LightBox触发一个带有新道具isOn的渲染，这次它的值为false
单击外部链接/按钮时，父级将监听该道具并将isOn的状态更改为true，同样地，isOn将传递给LightBox，其闪亮的新值为true。

小例子：

const cities = ["ny", "tlv", "ark"];

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    const { item, onClick } = this.props;
    onClick(item);
  }

  render() {
    return <button onClick={this.onClick}>{this.props.children}</button>;
  }
}

class LightBox extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    const { city, onClick } = this.props;
    onClick(city);
  }

  render() {
    const { isOn } = this.props;
    const css = `lightBoxStyle ${isOn && "onStyle"}`;
    return (
      <div 
        className={css}
        onClick={this.onClick}>
        |
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      turnedOn: []
    };

    this.on = this.on.bind(this);
    this.off = this.off.bind(this);
  }

  on(city) {
    const { turnedOn } = this.state;
    if (turnedOn.find(c => c === city)) {
      return;
    }
    const nextState = [...turnedOn, city];
    this.setState({ turnedOn: nextState });
  }

  off(city) {
    const nextState = this.state.turnedOn.filter(c => c !== city);
    this.setState({ turnedOn: nextState });
  }

  render() {
    const { turnedOn } = this.state;
    return (
      <div>
        {cities.map((city, i) => {
          const isOn = turnedOn && turnedOn.includes(city);

          return (
            <div style={{ display: "inline-block", margin: "0 10px" }}>
              <LightBox city={city} isOn={isOn} onClick={this.on} />
              <hr />
              <Button item={city} onClick={this.off}>
                Close the light!
              </Button>
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

css prettyprint-override">.lightBoxStyle{
  border: 1px solid #eee;
  width: 30px;
  height: 30px;
  text-align: center;
  box-shadow: 0 0 4px 1px #222;
  border-radius: 50%;
  margin: 0 auto;
  cursor: pointer;
}

.onStyle{
  background-color: #333;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

您可以将您的CloseLightbox方法移动到上层组件，并从父组件管理show Lightboxprop。然后组件DisplayLightbox将有3个道具：show Lightbox，Travel City和方法CloseLightbox。

当您将关闭Lightbox移动到父组件时，事件组件WillReceiveProps应该不再需要。