小编Mos*_*she的帖子

我正在寻找动态设置组件的html标签。例如：

  components: {
    test: {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
    }
  }

然后，我可以在html文件中使用如下代码：

<test tag="a" :attributes="{href:'http://www.google.com'}">a tag content</test>
<test tag="p">p tag content</test>

现在，我想做的就是使用Vue Loader之类的东西拆分组件。基本上，我想将不同的组件拆分成不同的文件，然后使用main.js文件导入它们。

我尝试过类似的方法，但是不起作用：

// components/test.js 
export default {
  components: {
    test: {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
    }
  }
}

// main.js
import Vue from 'vue'  // don't think this is relevant, but it's there
import Test from …

我刚刚开始使用样式组件，并希望为按钮、导航栏等内容创建变体。

例如，我想创建一个深色版本的导航栏（其中背景颜色会变暗，文本颜色会变亮）。

我想要做的只是在组件上添加一个黑暗道具，如下所示：

<Navbar dark>...</Navbar>

我想这样做而不是这样：

<Navbar type="dark">...</Navbar>

但是，我不确定如何执行此操作。也就是说，如何仅通过检查道具名称是否存在来设置元素的样式（而不向道具传递任何值）？

有任何想法吗？提前致谢。

我正在尝试向 CKEditor5 的经典版本添加一个插件。我已按照此页面上的说明进行操作： https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html

我可以说我已经正确完成了所有事情，因为当我打开sample/index.html.

现在是时候将此自定义构建与我的 React 应用程序集成了。

此页面上的说明“描述”了要做什么：

您将在项目旁边的某个位置创建一个新构建，并将其包含在内，就像包含现有构建之一一样。

它说“像包含现有版本之一一样包含它”。好吧，这就是我包含经典构建的方式：

import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <CKEditor
        editor={ClassicEditor}
        // Other Props
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

所以，我假设我会做这样的事情：

import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from './ckeditor/ckeditor'


import "./styles.css";

function App() {
  return ( …

我试图找出使用sapper设置 firestore 的最佳方法。我特别询问工兵（不是苗条）。

关于这个主题的教程很少，我看到的那些我不确定。它们涉及修改 template.html 文件——我不确定这是否是一个好主意。

因此，简而言之，我想知道将 firestore 与工兵同步的最佳实践是什么。

有任何想法吗？

谢谢。

我在 Gatsby 中格式化日期时遇到问题。我从firestore获取了一些数据。我获取的字段之一被称为datePublished，它包含一个时间戳形式的数字（例如，1576945502000）。事实上，它确实是一个时间戳，但它以number格式类型保存到 firestore 。

现在，我想datePublished使用formatStringgraphql 中的函数来格式化该字段——如此处所述：https ://www.gatsbyjs.org/docs/graphql-reference/#dates

但我无法让格式工作。无论我尝试在 graphiql 中还是在我的网站上格式化字符串，它都不起作用。这是我尝试过的代码：

query MyQuery {
  allNewsFeed {
    edges {
      node {
        published(formatString:"dddd Mo, YYYY")
      }
    }
  }
}

这是我在 graphiql 中得到的错误消息：

“NewsFeed”类型的字段“datePublished”上的未知参数“formatString”。

如果我深入挖掘，我会注意到 firestore 中的字段类型被列为，number并且在 graphiql 文档资源管理器中它被列为FloatQueryOperatorInput.

更重要的是，我做了一个小实验，我尝试为同一个号码保存为一个string，number并timestamp在公司的FireStore。无论是字符串还是数字格式都不起作用，无论出于何种原因，gatsby-firesource插件都不会使用timestamp格式。

所以我想知道，我该怎么做才能让它在 gatsby 中工作？

有任何想法吗？

谢谢。

在一个典型的 nextjs 项目中，我发现自己有许多根级配置文件：

• tsconfig.json
• next.config.js
• 下一个 seo-config.ts
• .eslintrc
• ETC...

我想清理我的根目录并将这些文件移动到它们自己的目录中。特别是，我想创建一个config目录来存放上述文件。

这在nextjs中可能吗？如果是这样，我该怎么办？

谢谢。

我使用 VueJS 2.0 创建了一个自定义模式组件，其属性为“close”。我基本上让它按照我想要的方式工作，但想稍微改进一下。

我拥有的一项功能是可以选择添加关闭按钮，如下所示：

在 HTML 中添加 close="true" 的自定义属性

<modal close="true">
Etc...
</modal>

在JS文件中使用V-IF条件语句

<button v-if="close == 'true'></button>

结果是，如果 close 属性设置为 true，则关闭按钮出现，否则不会出现。这就是我想要的并且有效。

我的问题是我可以简化这个解决方案，以便我可以简单地设置 html 如下： <modal close>...</modal>。

然后我会简单地检查 close 属性是否存在。我尝试使用 来执行此操作<button v-if="close"></button>，但没有成功。

所以，我想知道这是否可能以及（如果可以）如何做到。

预先感谢您可以提供的任何帮助。

我有一个称为样式化组件的组件Headline，我希望使用另一个名为SubHeadline. 现在，Headline看起来像这样：

const Headline = styled.h2`
// Css styles go here
`

我想做的是扩展标题的样式并将标签类型更改为其他类型（例如 h3）。像这样的东西：

const SubHeadline = styled(Headline).h3`
// Css styles go here
`

现在以上不起作用，但它说明了我想做的事情。

关于如何做到这一点的任何想法？

请查看以下导入声明：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

是否可以为要导入的软件包的名称提供别名-即在这种情况下为@fortawesome/react-fontawesome。这样，我不必每次都写出整个项目名称。

为了清楚起见，我正在寻找最终结果，我可以执行以下操作：

import { FontAwesomeIcon } from 'fa'

或这个

import { FontAwesomeIcon } from '@custom/fa'

我使用fa（或@custom/fa）创建的名称引用了实际的@fortawesome/react-fontawesome库。

这可能吗？如果是这样，怎么办？

我不知道如何使vuetify 中的应用程序栏透明。我尝试添加该属性color="transparent"，但没有成功。我尝试过color="rgba(0,0,0, 0)"，但没有成功。我尝试过color="shades.transparent"——但这也行不通。

我想不通。知道如何实现这一点吗？

谢谢。