回調函數，負責更新狀態，作爲道具傳遞給子組件，不觸發狀態更新

Question

回調函數（位於Images組件中）負責進行狀態更新。我將該函數作爲道具傳遞給Modal組件，並在其中傳遞給ModalPanel組件。

該函數用於將state屬性display，設置爲false，這將關閉模態。目前，該功能無法按預期工作。

圖像組件：

class Images extends Component { 
    state = { 
    display: false, 
    activeIndex: 0 
    }; 

    handleModalDisplay = activeIndex => { 
    this.setState(() => { 
     return { 
     activeIndex, 
     display: true 
     }; 
    }); 
    }; 

    closeModal =() => { 
    this.setState(() => { 
     return { display: false }; 
    }); 
    } 

    render() { 
    const { imageData, width } = this.props; 
    return (
     <div> 
     {imageData.resources.map((image, index) => (
      <a 
      key={index} 
      onClick={() => this.handleModalDisplay(index)} 
      > 
      <Modal 
       closeModal={this.closeModal} 
       display={this.state.display} 
       activeIndex={this.state.activeIndex} 
       selectedIndex={index} 
      > 
       <Image 
       cloudName={CLOUDINARY.CLOUDNAME} 
       publicId={image.public_id} 
       width={width} 
       crop={CLOUDINARY.CROP_TYPE} 
       /> 
      </Modal> 
      </a> 
     ))} 
     </div> 
    ); 
    } 
} 

export default Images; 

模態分量：

const overlayStyle = { 
    position: 'fixed', 
    zIndex: '1', 
    paddingTop: '100px', 
    left: '0', 
    top: '0', 
    width: '100%', 
    height: '100%', 
    overflow: 'auto', 
    backgroundColor: 'rgba(0,0,0,0.9)' 
}; 

const button = { 
    borderRadius: '5px', 
    backgroundColor: '#FFF', 
    zIndex: '10' 
}; 

class ModalPanel extends Component { 
    render() { 
    const { display } = this.props; 
    console.log(display) 
    const overlay = (
     <div style={overlayStyle}> 
     <button style={button} onClick={this.props.closeModal}> 
      X 
     </button> 
     </div> 
    ); 
    return <div>{display ? overlay : null}</div>; 
    } 
} 

class Modal extends Component { 
    render() { 
    const { 
     activeIndex, 
     children, 
     selectedIndex, 
     display, 
     closeModal 
    } = this.props; 
    let modalPanel = null; 
    if (activeIndex === selectedIndex) { 
     modalPanel = (
     <ModalPanel display={this.props.display} closeModal={this.props.closeModal} /> 
    ); 
    } 

    return (
     <div> 
     {modalPanel} 
     {children} 
     </div> 
    ); 
    } 
} 

export default Modal; 

鏈接代碼 https://github.com/philmein23/chez_portfolio/blob/chez_portfolio/components/Images.js

https://github.com/philmein23/chez_portfolio/blob/chez_portfolio/components/Modal.js

Answer 1

你通過一個非常不處理這個模式反應和hacky的方式。

本質上，在你的方法，所有的情態動詞是總是那裏，當你點擊圖像，ALL模態display狀態變爲真實的，你匹配指數來決定顯示哪些內容。 由於Modal或Modal Panel中的同一個鍵的多個孩子，我懷疑它不工作。

我強烈建議你溝通當前的做法。這是我的建議：

1. 只有一個<Modal/>在Images組件。
2. 將selectedImage狀態添加到您的Images組件。每次點擊圖像時，您都會將selectedImage設置爲該點擊的圖像對象。
3. 通過selectedImage降至Modal顯示您想要的內容。

這樣，只有一個模態呈現在任何時間。內容會根據您點擊的圖片而動態變化。

這是工作的代碼，我從你的回購扭捏：

（我不知道該怎麼顯示爲模態的內容，所以我顯示圖像的public_id）

圖像組件

class Images extends Component { 
    state = { 
    display: false, 
    selectedImage: null 
    }; 

    handleModalDisplay = selectedImage => { 
    this.setState({ 
     selectedImage, 
     display: true 
    }) 
    }; 

    closeModal =() => { 
    //shorter way of writing setState 
    this.setState({display: false}) 
    } 

    render() { 
    const { imageData, width } = this.props; 
    return (
     <div> 
     <Modal 
      closeModal={this.closeModal} 
      display={this.state.display} 
      selectedImage={this.state.selectedImage} 
     /> 
     {imageData.resources.map((image, index) => (
      <a 
      //Only use index as key as last resort 
      key={ image.public_id } 
      onClick={() => this.handleModalDisplay(image)} 
      > 
      <Image 
       cloudName={CLOUDINARY.CLOUDNAME} 
       publicId={image.public_id} 
       width={width} 
       crop={CLOUDINARY.CROP_TYPE} 
      /> 
      </a> 
     ))} 
     </div> 
    ); 
    } 
} 

Modal Component

class Modal extends Component { 
    render() { 
    const { display, closeModal, selectedImage } = this.props; 

    const overlayContent =() => { 
     if (!selectedImage) return null; //for when no image is selected 
     return (
     //Here you dynamically display the content of modal using selectedImage 
     <h1 style={{color: 'white'}}>{selectedImage.public_id}</h1> 
    ) 
    } 

    const overlay = (
     <div style={overlayStyle}> 
     <button style={button} onClick={this.props.closeModal}> 
      X 
     </button> 
     { 
      //Show Modal Content 
      overlayContent() 
     } 
     </div> 
    ); 
    return <div>{display ? overlay : null}</div>; 
    } 
}