Reactjs 负责更新状态的回调函数，作为道具传递给未触发状态更新的子组件

回调函数（位于Images组件中）负责进行状态更新。我将该函数作为道具传递给Modal组件，并在其中传递给ModalPanel组件

该函数用于将状态属性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;

类图像扩展组件{
状态={
显示：假，
活动索引：0
};
HandleModelDisplay=activeIndex=>{
此.setState（（）=>{
返回{
活动索引，
显示：真
};
});
};
closeModal=（）=>{
此.setState（（）=>{
返回{display:false}；
});
}
render（）{
const{imageData，width}=this.props；
返回(
{imageData.resources.map（（图像，索引）=>(

您正在以一种非常无反应和不规范的方式处理这种模式

基本上，在您的方法中，所有模态都始终存在，当您单击图像时，allmodals
display
状态变为true，并且您匹配索引号以决定要显示的内容。
我怀疑它不工作，因为在模态面板或模态面板中有多个相同键的子项

我强烈建议您放弃目前的做法。以下是我的建议：

在
图像
组件中只有一个

将
selectedImage
状态添加到
Images
组件。每次单击图像时，都会将
selectedImage
设置到单击的图像对象
将
selectedImage
向下传递到
Modal
以显示所需内容
这样，始终只有一个模式渲染。内容根据您单击的图像动态变化

这是我从您的回购协议中调整的工作代码：

（我不确定显示什么作为模式内容，所以我显示图像的
public\u 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>
    );
  }
}

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

类图像扩展组件{
状态={
显示：假，
选择图像：空
};
HandleModelDisplay=选择图像=>{
这是我的国家({
选择图像，
显示：真
})
};
closeModal=（）=>{
//写setState的较短方法
this.setState（{display:false}）
}
render（）{
const{imageData，width}=this.props；
返回(
{imageData.resources.map（（图像，索引）=>(
这个.handleModalDisplay（图像）}
>
))}
);
}
}

模态分量

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>
    );
  }
}

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

类模态扩展组件{
render（）{
const{display，closeModal，selectedImage}=this.props；
常量覆盖内容=（）=>{
如果（！selectedImage）返回null；//当未选择图像时为
返回(
//在这里，您可以使用SelecteImage动态显示modal的内容
{selectedImage.public_id}
)
}
常数覆盖=(
X
{
//显示模态内容
覆盖内容（）
}
);
返回{display？overlay:null}；
}
}
您正在以一种非常无反应的方式处理这种模式

基本上，在您的方法中，所有模态都始终存在，当您单击图像时，allmodals
display
状态变为true，并且您匹配索引号以决定要显示的内容。
我怀疑它不工作，因为在模态面板或模态面板中有多个相同键的子项

我强烈建议您放弃目前的做法。以下是我的建议：

在
图像
组件中只有一个

将
selectedImage
状态添加到
Images
组件。每次单击图像时，都会将
selectedImage
设置到单击的图像对象
将
selectedImage
向下传递到
Modal
以显示所需内容
这样，始终只有一个模式渲染。内容根据您单击的图像动态变化

这是我从您的回购协议中调整的工作代码：

（我不确定显示什么作为模式内容，所以我显示图像的
public\u 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>
    );
  }
}

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

类图像扩展组件{
状态={
显示：假，
选择图像：空
};
HandleModelDisplay=选择图像=>{
这是我的国家({
选择图像，
显示：真
})
};
closeModal=（）=>{
//写setState的较短方法
this.setState（{display:false}）
}
render（）{
const{imageData，width}=this.props；
返回(
{imageData.resources.map（（图像，索引）=>(
这个.handleModalDisplay（图像）}
>
))}
);
}
}

模态分量

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>
    );
  }
}

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

类模态扩展组件{
render（）{
const{display，closeModal，selectedImage}=this.props；
常量覆盖内容=（）=>{
如果（！selectedImage）返回null；//当未选择图像时为
返回(
//在这里，您可以使用SelecteImage动态显示modal的内容
{selectedImage.public_id}
)
}
常数覆盖=(
X
{
//显示模态内容
覆盖内容（）
}
);
返回{display？overlay:null}；
}
}
除了提供github链接，您还可以在此处添加代码。这将有助于用户保存并转到链接查看代码谢谢@Anirudhadas-刚刚更新了帖子。为懒惰道歉：）现在您可以删除那些转移用户回答的链接。l