如何将变体作为道具传递给 ReasonML 中的 React 组件？答案

【问题标题】：How do I pass Variants as props to React Components in ReasonML?如何将变体作为道具传递给 ReasonML 中的 React 组件？
【发布时间】：2019-05-02 00:07:32
【问题描述】：

我尝试了以下方法来将变体作为道具发送。

type ipAddr =
  | IPV4
  | IPV8;


[@react.component]
let make = () => {
  let appData = Data.tileData;
  <div className="App">
    <header className="flex outline justify-between" />
    <Content selected={ipAddr.IPV4} appData />
  </div>;
};

但它会抛出错误，

忍者：错误：重建'build.ninja'：子命令失败

我也尝试过将变体直接发送到组件。

  <div className="App">
    <header className="flex outline justify-between" />
    <Content selected=IPV4 appData />
  </div>;

但它最终返回另一个错误

开始编译ninja：报错：依赖循环：src/App-ReactHooksTemplate.cmj -> src/Content-ReactHooksTemplate.cmj -> src/App-ReactHooksTemplate.cmj 完成编译（退出：1）

我哪里错了？

【问题讨论】：

尝试在清理构建后重新运行第二个版本 — npx bsb -clean-world && npx bsb -make-world — 并将命令输出的 all 粘贴到 gist.github.com 或类似的东西。据我所知，这应该有效，如问题中所述。

标签： reason bucklescript reason-react

【解决方案1】：

免责声明：我不知道 ReasonML，但是

如果是 OCaml，你只需写 IPV4，不需要像 ipAddr.IPV4 那样限定它。
也许这在 Reason 中是一样的？

【讨论】：

是的，它只是 IPV4
感谢您的建议。但我已经尝试过了并更新了问题以反映相同的情况。
如果Content 在一个单独的文件中并且在这个模块中引用ipAddr，这将是一个依赖循环，因为模块相互引用，这是不允许的。您需要将ipAddr 移动到Content 或移动到此模块和Content 都可以引用的单独模块。
如前所述，这不是导入失败的情况。

【解决方案2】：

我用另一种方式解决了这个问题。我没有将变体作为道具传递，而是简单地根据变体值渲染不同的组件。

[@react.component]
let make = () => {
  let appData = Data.tileData;
  switch (selected) {
  | IPV4 =>
    <div>
      <IPV4Renderer appData />
    </div>
  | IPV6 =>
    <div>
      <IPV6Renderer appData />
    </div>
  };
};

【讨论】：