以动态形式反应模态

Question

我是reactjs新手。在使用react-modal中的模态时，我想在我的代码中声明一个通用模态并在其上填充一个表单。

例如，我有两类爱好：跳伞和水肺潜水。它们都有相同的组件：一个复选框、一个文本区域和一些按钮。

我想实现以下伪代码：

a) 如果爱好==跳伞 显示选中复选框的模态 M，文本区域包含文本“跳伞备注”

b) 如果爱好==水肺潜水 使用相同的模态 M 并选中复选框，文本区域包含文本“水肺潜水备注”

目前，我可以通过两个模态来实现上述伪代码：一个用于跳伞，另一个用于水肺潜水。我想要的是一个基于爱好变量动态配置的单一模式。

react-modal 可以做到这一点吗？如果没有，有人可以建议更好的可以以编程方式填充的弹出模式吗？

Answer 1

我认为看待这个问题的一个好方法是将问题的关注点分离到模态相关逻辑和一般渲染逻辑之间。

如果我理解正确的话，根本目标是根据某个变量的值呈现不同的内容。这绝对是可能的，本质上也是 js 框架想要帮助你做到的。

第二个问题与模态相关，大多数模态实现，包括我认为的react-modal，接受 JSX.children 属性，它可以让你提供你想要组件呈现为其 html 子元素的内容。

为了解决第一点——关于将要渲染的单独内容映射到某个值——可以抽象地看待这一点，然后从反应的角度来看。问题基本上是根据某个值渲染一些 html，作为一个函数就是：

F(V)->HTML

React 提供了为组件使用 props 的能力，然后您可以在组件主体中使用这些 props 的值来确定要渲染的内容。所以就 React 而言，使用函数组件，这将是：

const MyFormContent = (props) => { ... }

例如，对于您的用例，您可能有：

const HobbyForm = (props) => {
  if (props.hobby === 'skydiving') {
    return (
      <form style={{margin:16, border:"1px solid #333", padding:8}}>
        <label for="a">Do You Like Skydiving?</label>
        <input id="a" type="checkbox" />
        <button type="submit"> GO!!</button>
      </form>
    );
  }
  if (props.hobby === 'scubadiving') {
    return (
      <form style={{margin:16, border:"1px solid #333", padding:8}}>
        <label for="b">Do You Wanna Scuba?</label>
        <input id="b" type="checkbox" />
        <button type="submit"> GO!!</button>
      </form>
    );
  }
  return null;
};

上面有点重复来展示主要概念，但是您可以根据自己的需要进行抽象。 React-modal 接受 JSX 子项作为 props，这意味着您可以将组件渲染为 Modal 的 JSX 子项：

<Modal isOpen={isOpen}>
    <HobbyForm hobby={value}/>
</Modal>

其中

isOpen

是您用来跟踪模式是否打开的状态，

value

是您想要从中导出要渲染的内容的值。

这是 stackblitz 的链接，其中包含完整示例。