import React, {useState} from 'react';
import {View, List, Image} from 'sreact';
import {color, fontSize} from 'sreact/retouch';
import {Empty} from '@components';
function Hello(props: {name:string}) {
return View(props.name)
}
export default function App() {
const [visible, setVisible] = useState<boolean>(false);
const [data, setData] = useState<{src: string, name: string}[]>([]);
useEffect(() => {
setData([{
src: "https://xxx.jpg",
name:"花开"
}]);
setVisible(true);
}, [])
return View(
List(data, (item, index) =>
View(
View(item.name),
Image(item.src)
)
.style(
color('red');
fontSize(12);
)
).whetherToShow(visible),
Empty().whetherToShow(!visible)
)
}
ReactUI 将 HTML5 中的元素使用 View 基础类封装,所有的组件类都继承自 View 类。View 包含用于书写样式的 style 方法,用于处理 事件的 on[*] 方法,用于设置是否渲染的 whetherToShow 方法等等。所有方法都可以使用链式写法,方法的书写顺序无关语义。
import React from 'react';
import {view} from 'sreact';
interface Props{
title: string;
Children?: View;
}
export function Modal(props: Props) {
const {title, Children} = props;
return View(
View(title),
View('X').onClick(() => this.onCancel()),
Children,
).show(this.visible)
};
Modal.bindFn<string>('visible');
Modal.bindFn<() => void>('onCancel');
import React, {useState} from 'react';
import {view} from 'sreact';
import {Modal} from '@components';
export default function App() {
const [visible, setVisible] = useState<boolean>(false);
return Modal('起司')
.visible(visible)
.onCancel(() => setVisible(false))
}
import React from 'react';
import {View} from 'sreact';
import {opacity} from 'sreact/retouch';
export default function App {
const [count, setCount] = setState
return View('hello world')
.onClick(({event, view}) => {
console.log('查看下', event.target.detail);
view.text('by me');
})
.onState(count, ({view}) => {
if (count === 3) {
view.animate(0, 0.3, 'ease-in').style(opacity(0.3))
}
})
}
onClick , onHover, onKeyup, onSubmit, onKeydown ...
...
...