如何在 HypserStack 中使用 MaterialUI 的 Mobile-Stepper？

【问题标题】：How to use MaterialUI's Mobile-Stepper in HypserStack?如何在 HypserStack 中使用 MaterialUI 的 Mobile-Stepper？
【发布时间】：2019-04-15 17:49:57
【问题描述】：

我尝试在 Hyperstack 中使用 mobile-stepper 组件 (https://material-ui.com/demos/steppers/#mobile-stepper-progress) 但出现此错误：

Failed prop type: Invalid prop `nextButton` supplied to `MobileStepper`, expected a ReactNode. in MobileStepper

它只呈现进度条，没有按钮。

尝试了各种方法，即：

Mui.MobileStepper( variant: "progress", steps: 6, position: "static",
                   nextButton: lambda { Mui.Button(size: "small") {'next'} },
                   backButton: lambda { Mui.Button(size: "small") {'back'} })

【问题讨论】：

标签： ruby reactjs material-ui hyperstack

【解决方案1】：

您想将完整的 ReactNode 传递给 nextButton 和 backButton 道具。您还需要将组件转换为本机 javascript。您可以在任何 Hyperstack 组件上调用 to_n 将其转换为本机反应类。

Mui.MobileStepper( variant: "progress", steps: 6, position: "static",
                   nextButton: Mui.Button(size: "small") {'next'}.to_n,
                   backButton: Mui.Button(size: "small") {'back'}.to_n)

【讨论】：

非常感谢，这似乎确实有效，但我有一个问题：它以某种方式在组件顶部呈现 2 个添加“下一步”、“返回”按钮，不知道为什么跨度>
@chiwowahh 我认为这是因为您需要添加 .as_node 以便组件不会呈现 - Mui.Button(size: "small") {'back'}.as_node.to_n)