Question

我正在使用react-bootstrap，并且在组件功能中有一个Modal，如下所示：

// stateless function component
function ServiceModal(props) {
    return (
        <Modal>
            <Modal.Dialog>
                <Modal.Header>
                    <Modal.Title>{props.item.name}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <p>{props.item.id}</p>
                    <p>{props.item.name}</p>
                    <p>{props.item.description}</p>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary">Close</Button>
                </Modal.Footer>
            </Modal.Dialog>
        </Modal>
    );
}

此模式不会出现。内容不显示，甚至不显示覆盖。这是我称之为渲染的方式：

class Service extends Component {

renderServiceModal(service) {
    return (
        <ServiceModal
            item={service}
        />
    );
}

render() {
    return (
      <div className="container content">
          <div className="row">
              <div className="col-6">
                  <form>
                    <div className="form-group">
                        <label htmlFor="nom">Name</label>
                        <input name="name" ref="name" type="text" className="form-control" id="name" placeholder="Name"
                               onChange={(value) => this.onChange(value)} />
                    </div>
                    <div className="row">
                      <div className="col-sm-3">
                          <button onClick={this.postService.bind(this)} type="submit" className="btn btn-primary btn-block">Add</button>
                      </div>
                    </div>
                  </form>
              </div>
              <div className="col-6">
                  <ul className="list-group">
                      {this.state.services.map(service =>
                          <li onClick={() => { this.readOneService(service.id) }} className="list-group-item" key={service.id}>{service.nom}
                                <div className="btn-group btn-group-sm float-right" role="group">
                                    <button type="button" className="btn btn-primary"
                                            onClick={() => this.updateService(service.id)}>Update
                                    </button>
                                    <button type="button" className="btn btn-danger"
                                            onClick={() => this.deleteService(service.id)}>Delete
                                    </button>
                                </div>
                            </li>
                      )}
                  </ul>
              </div>
          </div>
      </div>
    );
}

什么都没有显示……有帮助吗？

编辑：更新的问题，其中包含我的主组件中渲染的代码

Answer 1

默认情况下，模式是隐藏的：https://react-bootstrap.github.io/components/modal/#modals-props

您需要将show属性设置为true：（<Modal show={true}>）

完整代码

// stateless function component
function ServiceModal(props) {
    return (
        <Modal show={true}>
            <Modal.Dialog>
                <Modal.Header>
                    <Modal.Title>{props.item.name}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <p>{props.item.id}</p>
                    <p>{props.item.name}</p>
                    <p>{props.item.description}</p>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary">Close</Button>
                </Modal.Footer>
            </Modal.Dialog>
        </Modal>
    );
}

Answer 2

您必须在渲染器内部调用此函数（ServiceModal）。

模态不会出现在反应中

2 个答案: