Question

我的问题也在这里： https://gist.github.com/somanythings/8c3d34de754af311d7826ea837d160b4

使用scalajs与japgolly的scalajs-react（https://github.com/japgolly/scalajs-react）库。我正在尝试包裹平底锅网格http://griddlegriddle.github.io/Griddle/customization.html 我想要一个自定义列，要做到这一点，我需要传递一个包含组件的columnMetadata结构。

当我这样做时，我可以渲染一个没有属性的scalajs定义组件，但是如果我尝试通过renderP访问属性，或者通过renderS访问范围，则它们在render函数的范围内都是未定义的。如果我在浏览器中调试，它们的名称是绑定的，并且具有预期的值。

当我休息时

.nav-tab-pills { border-bottom: 3px solid #DDD; }
    .nav-tab-pills > li.active > a, .nav-tab > li.active > a:focus, .nav-tab-pills > li.active > a:hover { border-width: 0;background-color:#F7F7F7; }
    .nav-tab-pills > li > a { border: none; color: gray; }
        .nav-tab-pills > li.active > a, .nav-tab-pills > li > a:hover { border: none; color: #1ABB9C !important; background: transparent; }
        .nav-tab-pills > li > a::after { content: ""; background: #2A3F54; height: 3px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s ; transform: scale(0); }
    .nav-tab-pills > li.active > a::after, .nav-tab-pills > li:hover > a::after {transform: scale(1); }
.tab-nav-pills > li > a::after { background: #21527d none repeat scroll 0% 0%;}
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.nav-text{font-weight: bold}
.nav-text{font-size: 15px;}

然后def renderP(f: (DuringCallbackU[P, S, B], P) => ReactElement): Out = render($ => f($, $.props))未定义

我错过了什么？这是ReactComponentB调度中的简单输入问题吗？它与https://github.com/japgolly/scalajs-react/issues/157有什么关系，而我还没有看到怎么样？

$.props

Answer 1

React.JS要求props和state始终是一个对象（或null）。使用单个Scala值（如基元或案例类实例）会在React.JS中导致异常。因此，在scalajs-react中，为了允许用户以类型安全的方式使用任何道具/状态类型，在引擎盖下使用具有单个键"v"的对象。即而不是直接使用123，而是使用{v:123}。

您可能需要在代码中容纳该拳击。

现在，在下一个主要版本（参见“neo”分支）中，组件的表示得到了极大的改进，使得没有像我刚才描述的那样隐藏的魔法。虽然v0.x不是为了促进JS↔Scala组件互操作而设计的，但它在 neo 中将是明确的，显而易见的，并且希望是微不足道的。

在使用scalajs的scalajs中 - 如何将scalajs定义的组件传递给javascript定义的组件？

1 个答案: