Question

我试图通过这里的文档分配它来设置React Bootstrap模式的样式

prop: dialogClassName   
type: string
description: A css class to apply to the Modal dialog DOM node.

但是，它没有显示为有效的类。

Flexbox，背景颜色等似乎不适用于Modal父级的任何子级，这让我觉得Modal禁用任何样式或者我做错了什么

谢谢！

<ExampleModal 
     dialogClassName="planModal" <--Tried here
     modalState={this.props.modalState}
     openModal={this.props.actions.openModal}
     mealPlanArray={this.props.mealPlanArray}/>

ExampleModal的渲染看起来像这样

render() {                
    if (!this.props.modalState.openDisplay) { return ( <span/>) }
      return (
       <Modal className="TriedHere" show={this.props.modalState.openDisplay} onHide={this.props.openModal}>        
        <Modal.Header>            
          <h2>Bot Activated</h2>
        </Modal.Header>
        <Modal.Body>            
          {this.renderResults()}
        </Modal.Body>
      </Modal>    
    );
  } 
}

有人能想出一种方法来设计React Modal的内容吗？

Answer 1

稍微详细说明一下，

在当前的实施中，您要在负责在dialogClassName组件本身上呈现<Modal />组件而不是as the docs say的组件上设置<Modal />。

这意味着您可以访问this.props.dialogClassName内<ExampleModal />而不是<Modal />，这是react-bootstrap所期望的。

从更高级别的组件传递className没有任何问题，事实上，这是一个非常可能的用例，您希望有条件地将一些样式呈现给<Modal />组件。请确保它获得道具dialogClassName。

在你的情况下，你只需要再将它传递一级：

<ExampleModal 
 dialogClassName="planModal"  <-- This is a custom prop that you have created, 
 ...                              it's been given the same name, but the name 
 ...                              could be anything really.
 ... 
/>

然后在<ExampleModal />：

的render方法内部

<Modal 
  dialogClassName={this.props.dialogClassName}  <-- This is the prop that react-boostrap expects 
  show={this.props.modalState.openDisplay} 
  onHide={this.props.openModal}>

旁注：react-bootstrap文档中的代码示例实际上可以在浏览器中编辑。当你想要测试它们提供的不同组件的可选道具之类的东西时，这绝对是非常有用的。

在React Bootstrap中将类分配给模态

1 个答案: