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时，我希望对话框打开。我不知道我正在做的方式，即使用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

你可以这样做：

00:01:03.96
00:10:10.07
00:04:49.39
00:01:31.63
00:05:32.48
00:04:12.59
00:02:39.79
00:04:14.51
00:07:34.36
00:01:56.08

我建议使用boolean而不是return ( <div> <insert your other components> {this.state.isDialogOpen === 'yes' && <DialogBox />} <div> )的字符串。

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

1 个答案: