React - 呈现动态内容的正确方法？

Question

我想通过向其注入组件来使模态视图具有动态内容。

class RootView extends Component {
    state = {
        modalBody: null
    }

    setModalBody = (body) => {
        this.setState({modalBody: body})
    }

    render() {
        return(<ContextProvider value={this.setModalBody}><Modal>{this.state.modalBody}</Modal></ContextProvider>)
    }
}

然后在任何子视图中我使用setState 更改父modalBody

每个路由都可以设置modalBody，也就是说modalBody可以是input列表、selection列表或者纯文本。所以modalBody 必须有自己的状态来控制这些输入。

这样渲染正常，但是状态改变后动态内容无法更新。父动态内容无法接收到 ChildView 新状态，重新渲染后我必须一次又一次地setModalBody。

例如，如果 modalBody 中的输入发生变化，则无法更新父级。

class ChildView extends Component {
    state = {
        inputValue: null
    }

    handleChange = (e) => {
        this.setState({inputValue: e.target.value})
    }


    setModalBody(body) {
        this.props.context.setModalBody(<input value={this.state.inputValue} onChange={this.handleChange} />)
    }

    render() {
        return(<Modal>{this.state.modalBody}</Modal>)
    }
}

完整代码：https://codesandbox.io/s/lp5p20mx1m 将动态内容呈现给父级的任何正确方法？

Answer 1

当您可以将Modal 制作成一个简单的可重用child 组件时，我不确定您为什么需要创建父Modal 组件。

请参阅here，了解有关如何实现控制子模态的有状态父级的详细说明。

---

但是，如果您必须有一个父 Modal 组件，那么您可以创建一个 render prop 来传递 props 以供其 children 使用。

工作示例：

components/Modal.js（parent 组件——它有很多较小的组件，为了可重用性和易于理解而分开——它们基本上很简单divs附上一些styles -- 请参阅下面的注释）

import React, { Fragment, Component } from "react";
import PropTypes from "prop-types";
import BackgroundOverlay from "../BackgroundOverlay"; // grey background
import ClickHandler from "../ClickHandler"; // handles clicks outside of the modal
import Container from "../Container"; // contains the modal and background
import Content from "../Content"; // renders the "children" placed inside of <Modal>...</Modal>
import ModalContainer from "../ModalContainer"; // places the modal in the center of the page


class Modal extends Component {
  state = { isOpen: false };

  handleOpenModal = () => {
    this.setState({ isOpen: true });
  };

  handleCloseModal = () => {
    this.setState({ isOpen: false });
  };


  // this is a ternary operator (shorthand for "if/else" -- if cond ? then : else)
  // below can be read like: if isOpen is true, then render the modal,
  // else render whatever the child component is returning (in this case,
  // initially returning an "Open Modal" button)
  render = () =>
    this.state.isOpen ? (
      <Container>
        <BackgroundOverlay />
        <ModalContainer>
          <ClickHandler
            isOpen={this.state.isOpen}
            closeModal={this.handleCloseModal}
          >
            <Content>
              {this.props.children({
                isOpen: this.state.isOpen,
                onCloseModal: this.handleCloseModal,
                onOpenModal: this.handleOpenModal
              })}
            </Content>
          </ClickHandler>
        </ModalContainer>
      </Container>
    ) : (
      <Fragment>
        {this.props.children({
          isOpen: this.state.isOpen,
          onCloseModal: this.handleCloseModal,
          onOpenModal: this.handleOpenModal
        })}
      </Fragment>
    );
}

// these proptype declarations are to ensure that passed down props are 
// consistent and are defined as expected
Modal.propTypes = {
  children: PropTypes.func.isRequired // children must be a function
};

export default Modal;

components/Example.js（child 组件接受来自parent 的isOpen、onCloseModal 和onOpenModal——使用这种方法，您会注意到，有重复isOpen 逻辑。虽然这种方法可以让您完全控制父级，但它是重复的。但是，您可以通过将“打开模式”按钮逻辑移动到父级来简化组件，并将<Modal btnTitle="Open Modal"> 之类的道具传递给让它有点灵活，但是当isOpen 是false 时，你仍然会失去对最初呈现的内容的一些控制。）

import React, { Fragment } from "react";
import Modal from "../Modal";
import "./styles.css";

const Example = () => (
  <div className="example">
    <h2>Parent Modal Example</h2>
    <Modal>
      {({ isOpen, onCloseModal, onOpenModal }) =>
        isOpen ? (
          <Fragment>
            <h1 className="title">Hello!</h1>
            <p className="subtitle">There are two ways to close this modal</p>
            <ul>
              <li>Click outside of this modal in the grey overlay area.</li>
              <li>Click the close button below.</li>
            </ul>
            <button
              className="uk-button uk-button-danger uk-button-small"
              onClick={onCloseModal}
            >
              Close
            </button>
          </Fragment>
        ) : (
          <button
            className="uk-button uk-button-primary uk-button-small"
            onClick={onOpenModal}
          >
            Open Modal
          </button>
        )
      }
    </Modal>
  </div>
);

export default Example;