标签: reason-react

我不懂make工作的方式:

let component = ReasonReact.reducerComponent("Greeting");

let make = (~name, _children) => {
  ...component,
  initialState: () => 0, /* here, state is an `int` */
  render: (self) => {
    let greeting =
      "Hello " ++ name ++ ". You've clicked the button " ++ string_of_int(self.state) ++ " time(s)!";
    <div>{ReasonReact.stringToElement(greeting)}</div>
  }
};

据我所知,make每次<Greeting>在父组件渲染方法中使用组件时都会调用它,因此它将被多次调用.

但这也意味着组件记录会创建多倍的initialState功能吗？

我不明白initialState每次创建React元素时分配一些函数是有意义的,而只有在元素被挂载时才会调用它,并且对更新没有影响.

我initialState举一个例子,但也可以对其他生命周期回调也一样.

我想呈现一个HTML复选框，其选中状态由数据控制。

给出一个接收item类型的无状态组件{ label: string, checked: bool}，

像这样：

let component = ReasonReact.statelessComponent("TodoItem");

let make = (~item, _children) => {
  render: _self => {
     <li> <input type_="checkbox" {/*looking for something like this*/ item.checked ? "checked" : "" /* doesn't compile */}/> {ReasonReact.string(item.label)} </li>
  }
}

如何根据条件将属性的存在添加checked到input标签item.checked == true？

我正在寻找一个关于如何开始使用以下技术的快速示例：

• HTML5 画布
• 原因ML
• ReasonReact：“在 Reason 中，ReasonReact 是一种更安全、更简单的构建 React 组件的方法。”
• bs-webapi : Reason 的 Web API 绑定
• 反应钩子

让我开始一个执行以下操作的片段会很棒：

• 优雅且正确地管理对 HTML5 Canvas 元素的引用
• 是一个简单的反应组件
• 清除画布并绘制一些东西

我已经有了基本的 ReasonML React 项目设置。

运行后：

bsb -init my-react-login-app -theme react

然后，据我了解，我运行以下命令来构建项目：

$npm run build

但是，我得到以下错误输出：

> my-react-login-app@0.1.0 build /Users/kevinmeredith/Workspace/my-react-login-app
> bsb -make-world

Package not found: resolving package reason-react in /  
File "bsconfig.json", line 1
Error: package reason-react not found or built , if it is not built
Please run 'bsb -make-world', otherwise please install it
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! my-react-login-app@0.1.0 build: `bsb -make-world`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the my-react-login-app@0.1.0 build script. …

鉴于以下内容:

$cat src/Greeting.re
let component = ReasonReact.reducerComponent("Greeting");

type action =
 | Click;

type state = {
    count: int
};

let make = (_children) => {
  ...component,
  initialState: () => {count: 0},
  reducer: (action, state) =>
    ReasonReact.Update({count: state.count + 1}),
  render: (self) => {
     let message = "Clicked " ++ string_of_int(self.state.count) ++ "x";
        <div>
          <button
            onClick={_event => self.send(Click)}
          />
          {ReasonReact.stringToElement(message)}
        </div>
  }
};

我得到以下编译时错误:

  17 ? <div>
  18 ?   <button
  19 ?     onClick={_event => self.send(Click)}
  20 ?   />
  21 ?   {ReasonReact.stringToElement(message)} …