Question

我有一个list(string)，长度未知，我想在我的ReasonReact组件中进行渲染。我已经读到no built-in support用于打印复杂的数据结构。但是，如何在不使用Javascript的情况下以一种纯功能性的方式在其组件中呈现列表呢？我发现一个snippet可以使用模式匹配上的递归来实现。我认为必须有一种更简单的方法，因为这似乎是一种经常使用的操作。

与我要实现的JavaScript等效的是Array.toString()。

Answer 1

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

要从string中创建一个list(string)，最好采用与Array.toString相同的格式，即以逗号分隔，不包含方括号，并且不使用任何JavaScript特定的API 。
将字符串呈现为ReasonReact组件。

第1步：字符串转换

这可以使用String.concat完成：

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

这将返回"a, b, c"

第2步：渲染为ReasonReact组件

ReasonReact中的渲染字符串是使用ReasonReact.string完成的。这是一个完整的，可运行的示例，该组件采用类型为items的prop list(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");

Playground link

打印长度未知的列表

1 个答案:

第1步：字符串转换

第2步：渲染为ReasonReact组件