像material-ui这样的库需要将组件作为属性添加到另一个反应组件。
JSX示例(参见live/complete):
render() {
const actions = [
<FlatButton
label="Cancel"
primary={true}
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
keyboardFocused={true}
onTouchTap={this.handleClose}
/>,
];
return (
<div>
<RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
The actions in this window were passed in as an array of React objects.
</Dialog>
</div>
);
}
我想知道purescript-pux中是否可行。以下方法不起作用。有办法吗?
foreign import raisedButtonClass :: ? props. ReactClass props
raisedButton = reactClassWithProps raisedButtonClass "RaisedButton"
foreign import dialogClass :: ? props. ReactClass props
dialog = reactClassWithProps dialogClass "Dialog"
...
dialog {
-- the next line does not work
actions: [(raisedButton {label: "Close"} #! onClick (const ToggleDialog) $ mempty)],
open: state.isDialogOpen,
title: "Dialog Title"
}
#! (on "onRequestClose" (const ToggleDialog))
$ text "Dialog Text"
您可以在此处找到完整示例:https://github.com/shybyte/pux-starter-app-material-ui/blob/master/src/Main.purs