为了学习理性和理性反应,我正在开发一个简单的"Things 2 Do"应用程序(参见GitHub上的源代码(。
我有一个 TodoItem 组件,当项目完成后,它应该以删除线样式呈现。
我尝试通过创建具有各种样式的记录来解决此问题,类似于 CSS 类,一个根样式和一个用于已完成项目的记录。
type style = {
root: ReactDOMRe.style,
completed: ReactDOMRe.style
};
let styles = {
root: ReactDOMRe.Style.make(), /* add root styles here */
completed: ReactDOMRe.Style.make(~opacity="0.666", ~textDecoration="line-through", ())
};
如果完成的道具是真的,我会将根样式与完成的样式结合起来,否则我只使用根,像这样:
let style = styles.root;
let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;
这有效,但它似乎很笨拙,所以我想知道:是否有更优雅的解决方案,例如使用变体和 switch 语句?
为依赖于道具的 Reason-React 组件创建样式的惯用方法是什么?
这是我的组件的完整代码:
type item = {
id: int,
title: string,
completed: bool
};
type style = {
root: ReactDOMRe.style,
completed: ReactDOMRe.style
};
let str = ReasonReact.stringToElement;
let component = ReasonReact.statelessComponent("TodoItem");
let styles = {
root: ReactDOMRe.Style.make(), /* add root styles here */
completed: ReactDOMRe.Style.make(~opacity="0.666", ~textDecoration="line-through", ())
};
let make = (~item: item, ~onToggle, _) => {
...component,
render: (_) => {
let style = styles.root;
let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;
<div style>
<input
_type="checkbox"
onChange=((_) => onToggle())
checked=(Js.Boolean.to_js_boolean(item.completed))
/>
<label> (str(item.title)) </label>
</div>
}
};
还没有任何东西可以称为惯用语。这个领域正在迅速变化,甚至我对如何改进它也有一些自己的想法,但我现在使用 bs-css 或多或少是这样做的:
module Styles = {
open Css;
let root = completed => style([
color(white),
opacity(completed ? 0.666 : 1.),
textDecoration(completed ? LineThrough : None)
]);
}
...
render: _self =>
<div className=Styles.root(item.completed)>
...
</div>
目前,我设置组件样式的方式还可以。在 Reason 中还没有真正习惯性的方式来设置 React 组件的样式。
原因文档是这样说的:
由于CSS-in-JS现在风靡一时,我们将很快推荐我们的官方选择。同时,对于内联样式,有ReactDOMRe.Style.make API