Как я могу поделиться реквизитом в ReasonReact? - PullRequest
0 голосов
/ 03 ноября 2018

Резюме

Предположим, у меня есть reducerComponent

<TodoList />

, который использует statelessComponent

<TodoItem todo />

Здесь todo - это тип записи с именем todoItem.

type todoItem = {
  text: string,
  isDone: bool,
};

Но я не могу поделиться todoItem типом.

  • Если я определю тип в TodoList.re TodoItem будет жаловаться.
  • Если я определю тип в TodoItem.re TodoList будет жаловаться.

Источники

Вот мой TodoList.re

/** TodoList.re */

// ↓ I defined `todoItem` type
type todoItem = {
  text: string,
  isDone: bool,
};

// state depends on `todoItem` type ↓
type state = {todoList: list(todoItem)};

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

let make = _children => {
  ...component,
  initialState: () => {todoList: []},
  reducer: (action, state) => ...,
  render: self =>
    <div> {List.map(todo => <TodoItem todo />, self.state.todoList)} </div>,
};

А TodoItem.re

/** TodoItem.re */

let component = ReasonReact.statelessComponent("TodoItem")

let make  = (~todo, _children) => {
    ...component,
    render: (_self) => {
        // ↓ I'm getting an error here
        <p>(ReasonReact.string(todo.text))</p>
    }
}

Сообщение об ошибке

[1/2] Building ...em-ReactTemplate.cmj

  We've found a bug for you!
  /Users/kkweon/temp/my-react-app/src/components/TodoItem.re 6:37-40

  4 │     ...component,
  5 │     render: (_self) => {
  6 │         <p>(ReasonReact.string(todo.text))</p>
  7 │     }
  8 │ }

  The record field text can't be found.

  If it's defined in another module or file, bring it into scope by:
  - Annotating it with said module name: let baby = {MyModule.age: 3}
  - Or specifying its type: let baby: MyModule.person = {age: 3}

>>>> Finish compiling(exit: 1)

1 Ответ

0 голосов
/ 03 ноября 2018

Каждый файл Reason является модулем.

Итак, после определения

type todoItem = {
  text: string,
  isDone: bool,
};

в TodoItem.re

Я могу назвать это как

type state = {todoList: list(TodoItem.todoItem)};
...