Purescript-Pux:如何将反应组件作为属性添加到另一个反应组件(Material-UI)

时间:2017-07-04 17:30:49

标签: purescript purescript-pux

像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

0 个答案:

没有答案