Question

我在React世界中是一个很新的东西，我正在尝试使用react bootstrap模式创建一个对话框组件。

这就是我构建组件的方式。

父级（消息组件） - Messages.tsx

           <DialogBox modalOpen={this.state.modalOpen} onCloseModal={() => this.onCloseModal()} title="Retry">
                   <DialogBox.Body>
                       <p>You have selected the messages to be retried. This action will cause the messages to be put back on to the original queues.</p>
                       <p>Do you want to proceed?</p>
                   </DialogBox.Body>

                   <DialogBox.Footer>
                       <div className='col-sm-2 button button-action button-primary' onClick={() => this.retryMessages()}>
                           Ok
                       </div>
                       <div className='col-sm-2 button button-action button-cancel' onClick={() =>this.onCloseModal()}>
                           Cancel
                       </div>
                   </DialogBox.Footer>
               </DialogBox>

子组件 - DialogBox.tsx

import * as React from 'react';
import { Component } from 'react';
import { Modal } from 'react-bootstrap';
import PropTypes from 'prop-types';
import './DialogBox.scss';
import Body from './Body';
import Footer from './Footer';

export interface IDialogInterface {
    onCloseModal: PropTypes.func.isRequired;
    modalOpen: PropTypes.bool.isRequired;
    title: PropTypes.string.isRequired;
}

export default class DialogBox extends Component<IDialogInterface> {

    constructor(props) {
    super(props);
}
static Body = Body;
static Footer = Footer;
public render() {
    return <Modal show={this.props.modalOpen} onHide={() => this.props.onCloseModal()}>
        <Modal.Header closeButton>
            <Modal.Title>{this.props.title}</Modal.Title>
        </Modal.Header>

        <Modal.Body>
            <Body>{}</Body> *what goes in here?*
            <Body>{this.props.children}</Body> * I expected this to get only the stuff that's between `DialogBox.Body` in the Parent but it gets Footer stuff as well.*
        </Modal.Body>

        <Modal.Footer>
            <Footer> {DialogBox.Footer} </Footer>  *what goes in here? *
        </Modal.Footer>
    </Modal>;
}

}

Body.tsx -

export default class Body extends Component {
constructor(props) {
    super(props);
}

public render() {
    return <div>{this.props.children}</div>;
    }
}

Footer.tsx：

export default class Footer extends Component {
constructor(props) {
    super(props);
}

public render() {
    return <div>{this.props.children}</div>;
  }
}

我将Body and Footer声明为静态属性，因此我可以像在Parent中一样直接调用它们，并且它也很清楚。

我遇到的主要问题是不知道要在Body和Footer标记中包含哪些内容。我想将<DialogBox.Body>和<DialogBox.Footer>的内容从Messages组件传递到DialogBox组件。 this.props.children获取<DialogBox>标记之间的所有内容。如何从父组件分别将Body和Footer的内容传递给我的子组件？任何帮助都非常感谢。提前谢谢。

Answer 1

我会将您的Footer和Body创建为无状态组件或仅仅是片段，然后将它们作为组件的道具传递给它们来呈现它们。像这样：

<强> Messages.tsx

const Body = (
  <React.Fragment>
    <p>You have selected the messages to be retried. This action will cause the messages to be put back on to the original queues.</p>
    <p>Do you want to proceed?</p>
  </React.Fragment>
)
const Footer = (
  <React.Fragment>
    <div className='col-sm-2 button button-action button-primary' onClick={() => this.retryMessages()}>
      Ok
    </div>
    <div className='col-sm-2 button button-action button-cancel' onClick={() => this.onCloseModal()}>
      Cancel
    </div>
  </React.Fragment>
)

<DialogBox
    modalOpen={ this.state.modalOpen }
    onCloseModal={ () => this.onCloseModal() }
    title="Retry"
    body={ <Body /> }
    footer={ <Footer /> }
/>

<强> DialogBox.tsx

export default class DialogBox extends Component<IDialogInterface> {
  render() {
    const { body, footer } = this.props;
    return (
      <Modal show={ this.props.modalOpen } onHide={ () => this.props.onCloseModal() }>
        <Modal.Header closeButton>
          <Modal.Title>{ this.props.title }</Modal.Title>
        </Modal.Header>
        <Modal.Body>{ body }</Modal.Body>
        <Modal.Footer>{ footer }</Modal.Footer>
      </Modal>
    )
  }
}

澄清在父组件中声明为静态属性的React组件

1 个答案: