我的对话框组件未在 Reactjs 中显示

Question

我有一个组件名称对话框，我想在单击所有其他组件时显示它。我有一个主要组件作为

class ImageEditor extends Component {

  constructor() {
    super();
    this.state = { images: [], redirect: 'no', imageId: '', isDialogOpen: 'no' };
  }

  componentDidMount() {
    let promise = apiGateway.getImages();
      promise.then((images) => {
        this.setState({ images: images });
      });
}

openDialog = () =>{
  this.setState({ isDialogOpen : 'yes' });
}

closeDialog = () =>{
this.setState({ isDialogOpen: 'no' });
}


deleteImage = (id) => {
  apiGateway.removeImage(id);
}

setRedirect = (id) => {
  this.setState({ redirect: 'yes', imageId: id });
}



renderImage(image,index){

  return(
    <div key={index}>
     <p>Title: {image.title}</p>
     <p>Description: {image.description}</p>
    <button onClick={(e)=> this.deleteImage(image._id)}>DELETE</button>
    <button onClick={(e)=> this.setRedirect(image._id)}>UPDATE</button>
    <button onClick={this.openDialog}>SHARE</button>
    <img className='image' src={image.link} width='100' height='100' alt='nature'/>
    <br/><br/>
    </div>
    );
}


  render() {
        const { redirect , isDialogOpen } =  this.state;
        if(redirect === 'yes'){
          return <Redirect to={`/update/${this.state.imageId}`}/>
        }

         if(isDialogOpen === 'yes'){
          <DialogBox />  ????????
        }
    return(  
                 <div>
                      <div>{
                        this.state.images.map((image,index)=>{

                          return this.renderImage(image,index);
                        })
                      }
                      </div>
                </div>
    );
  }

}

export default ImageEditor;

当一个人点击 SHARE 时，我希望 Dialog Box 打开。我不知道我在做什么，即使用 dialogBox 加载组件是对还是错。所以每一个建议或任何建议肯定会对我有所帮助。这是我的对话组件（现在我收到一个错误：预期分配或函数调用，而是看到一个表达式 no-unused-expressions）

class DialogBox extends Component {

  render() {

    return(
        <div>
        <Dialog title="Dialog Title" modal={true} onClose={this.handleClose} buttons={ [{ text: "Close", onClick: () => this.handleClose() }] }>
                        <h1>Dialog Content</h1>
                        <p>More Content. Anything goes here</p>
        </Dialog>
        </div>
        );
  }

}

Answer 1

你可以这样做：

return (
  <div>
    <insert your other components>
    {this.state.isDialogOpen === 'yes' && <DialogBox />}
  <div>
)

我建议isDialogOpen 使用布尔值而不是字符串。