1

我有一个list(string)长度未知的，我想在我的 ReasonReact 组件中呈现。我读过没有对打印复杂数据结构的内置支持。但是，如何在不使用 Javascript 的情况下以纯函数方式在其组件中呈现列表呢？我找到了一个使用递归模式匹配来实现这一点的片段。我认为必须有一种更简单的方法，因为这似乎是一个相当常用的操作。

我想要实现的 Javascript 等价物是Array.toString().

4

1 回答 1

2

如果我理解正确，您需要完成两个步骤：

  1. 要创建一个stringout of the list(string)，最好以相同的方式格式化Array.toString，即逗号分隔，不带方括号，也不使用任何 JavaScript 特定的 API。
  2. 将字符串呈现为 ReasonReact 组件。

第一步：字符串转换

这可以使用String.concat：

let myList = ["a", "b", "c"];
let myString = String.concat(", ", myList);

这将返回"a, b, c"

第 2 步：渲染为 ReasonReact 组件

ReasonReact 中的渲染字符串是使用ReasonReact.string. items这是一个完整的、可运行的组件示例，该组件采用类型的 proplist(string)并将其呈现在<span>元素中。

module ListRenderer = {
  let component = ReasonReact.statelessComponent("ListRenderer");
  let make = (~items, _children) => {
    ...component,
    render: _self =>
      <span> {ReasonReact.string(String.concat(", ", items))} </span>
  };
};

ReactDOMRe.renderToElementWithId(<ListRenderer items=["a", "b", "c"] />, "preview");

游乐场链接

于 2018-10-10T20:08:31.990 回答