问题标签 [grommet]

我开始学习 Grommet（React 的 UX 框架）。按照他们的教程，我在http://grommet.io/docs/hello-world上玩了 CodePen ( https://codepen.io/pen?template=gaEGPY&editors=0010 )。

我想做一个有侧边栏的网站，所以我决定使用拆分组件。为了尝试一下，我<App></App>像这样替换了代码（他们在示例中给出的代码）：

当我这样做时，盒子的边缘不会到达屏幕的边缘。它总是在盒子的末端和屏幕的侧面之间留下一些空间。

本质上，我希望蓝色部分占据整个屏幕的左半部分（延伸到屏幕的末端），而不仅仅是停在某个任意位置（在示例中它没有这样做）。我如何在 Grommet 中执行此操作？

我想要做的是从 ListBox 中选择一个项目并将其显示在同一个网页中。ListBox 正确呈现，但是当我尝试输出所选值时，它显示目标未定义。参考代码中的注释。

我尝试使用 event.target.value 来检索到目前为止一直对我有用的所选值，但它说 event.target 未定义并且该值不可访问。

注意：我尝试在这个应用程序中使用 Grommet 进行样式设置，“List”、“Box”、“ListItem”都是垫圈组件。

任何帮助将不胜感激。

警告：道具类型失败：提供给children的道具类型无效，需要一个数组。objectSplit

对于以下代码，我在控制台中收到此警告，

我正在使用 grommet 版本 1.3.4 并尝试将 mongodb 与 node js 和 express 一起使用。当我运行时，npm install我得到以下类型错误：

这是我用于 Person 模式的代码：

babel 将其转译成这样：

显然它在我导出模型的最后一行失败了。我对 mongodb 和 grommet 都不是很熟悉，所以对我做错了什么有什么想法吗？

我在导入 UI 库时遇到了问题，我遇到了 ant 设计库的问题，所以我决定尝试不同的库，现在我在导入 Grommet 时遇到了问题。

我究竟做错了什么？我根据文档添加了依赖项，并添加了文档中包含的示例，但仍然无法正常工作。

我正在尝试从文档中执行此代码

但看起来完全不一样

我使用codesandbox.io，这里是上面代码的链接

我有一个文本框，用户在其中输入一个存储在 state 中的数字value。
现在我想创建一个数组[0, 1, 2, ..., value]。
该数组将用于创建(value + 1)具有相应 ID 的框/div 的数量。

现在我已经尝试过了

但它只创建了一个带有 h3 文本“0”的框。我有正确定义的状态、NodeBox 和所有内容。似乎没有问题。

如果我这样做

我得到了预期的结果。我得到 4 个包含相应数字的盒子。

索环看起来很有趣。不确定我是否爱上了按钮边框半径；是否有一种主题方法可以全局重置所有 Grommet 按钮上的按钮半径？

之前遇到一个错误：
Warning: Encountered two children with the same key,project. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

这个错误来自我一直在使用的 Grommet DataTable。问题在我的桌子上，第一列是“类型”，它可以有两个选项之一：项目或任务。Grommet 自动将第一列作为键，这不是我想要的，因为键会重复。

我已经彻底阅读了 Grommets 文档，并尝试按照他们在此处的指示输入主键：

https://v2.grommet.io/datatable#primaryKey

我的第一次尝试是按照他们的指示使用 primaryKey，请参阅下面代码中的第一次尝试。

我的第二次尝试是将 data._id 作为列输入，并将主要设置为 true。这可行，但我不希望 data._id 显示在我的表中，我只想将其设置为键。

我想将键设置为 data._id，因为它是唯一标识符，但是，我不希望 data._id 显示在我的表中。

任何建议将不胜感激。

我无法取消选择我在 state 中设置的默认值。

我从Grommet 的代码沙箱中提取了一个示例。

到目前为止唯一的变化是添加一个对象数组而不是字符串数组。请参阅文档中提到的对象数组中的 VALUE 道具。.

在日志中，selected: [ -1, 1 ]当我尝试取消选择该Rollout选项时，我得到了，并且Rollout仍然在视图中突出显示/选中。

我正在使用 Grommet v2 组件并尝试镜像 Grommet 故事书中 Select 'Seasons' 示例中使用的显示。

该字段如下所示：

不同之处在于我的数据需要将标签和值分开：

而不是使用默认值：

这是Codesandbox上的示例

在他们的故事书中Grommet 的 ObjectMultiSelect 示例中使用了对象格式。我发现 Select 组件需要 labelKey="label"并将valueKey="value"对象作为选项加载，但是添加这两个道具似乎破坏了组件选项。

我希望传入的数据类似于

并且仍然有如上显示的选项。