标签: grommet

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

该字段显示如下：

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

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

而不是使用默认值：

const Options = [
  "S01",
  "S02",

这是Codesandbox上的示例

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

我希望传入的数据类似于

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

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

我正在使用 Grommet 并试图在按下按钮时让图层（几乎是模态）工作。我知道我的 onClick 有效，因为我尝试了一个简单的 console.log 并且它有效。如果我使用 ReactDOM 并渲染它，也可以显示 MyModal。我认为我的问题与我如何调用或返回它有关？我希望在单击按钮时显示模态。

MyModal.js

import React, { Component } from 'react';
import Layer from 'grommet/components/Layer';
import Header  from 'grommet/components/Header';
import Heading from 'grommet/components/Heading';
import Section from 'grommet/components/Section';
import Paragraph from 'grommet/components/Paragraph';

export default class MyModal extends Component {  
  render () {
    return (
        <Layer closer={true} align="top">
            <Header>
                <Heading tag="h2">
                    Title
                </Heading>
            </Header>
            <Section>
                <Paragraph>
                    This is a simple dialog.
                </Paragraph>
            </Section>
        </Layer>
    );
  }
};

主程序

import React, { Component } …

我正在使用grommet-ui和webpack进行反应.如何设置自己的颜色选项.

有没有办法使用我自己的自定义颜色/配色方案代替预定义的颜色,如colorIndex ="neutral-1".

我正在研究Grommet 的入门示例，并在添加标签时遇到此错误<AppBar>：

defaultValidatorFn is not a function
TypeError: defaultValidatorFn is not a function
    at shouldForwardProp (http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:4491:12)
    at http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:11014:142
    at D (http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:11023:6)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:31049:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:33620:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:35667:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:20641:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:20685:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:20742:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:40616:11)

进一步检查时，控制台会显示一堆警告，如下所示：

styled-components: it looks like an unknown prop "full" is being sent through to the DOM, which will likely trigger a React console error

我尝试过yarn add @emotion/is-prop-valid，但这没有任何区别。我在这里做错了什么？

我想在我的React项目中使用索环,我正在使用webpack.我添加了scss加载器,当我构建我的应用程序时,我收到以下错误:

ERROR in ./~/css-loader!./~/sass-loader!./scss/index.scss
Module build failed: 
@import "inuit-defaults/settings.defaults";
^
      File to import not found or unreadable: inuit-defaults/settings.defaults
Parent style sheet: /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss
      in /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1)
 @ ./scss/index.scss 4:14-116 13:2-17:4 14:20-122

不知道我做错了什么..

这是我的webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports ={
    devtool :'cheap-module-eval-source-map',
    entry:[
        'webpack/hot/only-dev-server',
        './index.jsx'
    ],
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                exclude :/node_modules/,
                include: __dirname,
                loader:'react-hot'
            },
            {
                test: /\.jsx?$/,
                exclude :/node_modules/,
                include: __dirname,
                loader:'babel',
                query:{
                    "plugins":["transform-decorators-legacy"],
                    "presets":["es2015","react"]
                }
            },
            {
                test :/\.css?$/,
                include: __dirname, …

我正在使用grommet版本1.3.4并尝试将mongodb与节点js和express一起使用.当我运行时,npm install我得到以下TypeError:

/home/jorge/Desktop/crud-app/node_modules/mongoose/lib/index.js:373
  if (!this.modelSchemas[name]) {
            ^

TypeError: Cannot read property 'modelSchemas' of undefined
    at Mongoose.model (/home/jorge/Desktop/crud-app/node_modules/mongoose/lib/index.js:373:13)
    at Object.<anonymous> (/home/jorge/Desktop/crud-app/dist-server/models/person.model.js:18:39)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/home/jorge/Desktop/crud-app/dist-server/controllers/person.controller.js:9:15)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
[nodemon] app crashed - waiting for file changes before starting...

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

import { Schema, model } …