标签: frontend

我正在研究 SCSS 循环，但遇到了一个问题。问题是考虑一个颜色列表。

$colors:'red','green','red','blue';

@each $color in $colors{
  $i:index($colors,$color);
  .cube:nth-child(#{$i}){
    background:$color;
  };
}

上述程序的输出是

.cube:nth-child(1) {
  background: "red";
}

.cube:nth-child(2) {
  background: "green";
}

.cube:nth-child(1) { // issue here unable to get index value 3
  background: "red"; 
}

.cube:nth-child(4) {
  background: "blue";
}

我无法获得索引值 3。有人能帮我解决这个问题吗？我的问题是

1. 如何获得3的索引值？
2. 是否可以使用每个获取索引？如果“是”怎么办？
3. 如果不是，有什么替代方法？

PrimeNg 提供了非常好的日历组件，它工作得非常好，但是有没有办法在选择 2 个日期后关闭它？

<p-calendar [(ngModel)]="rangeDates" 
            selectionMode="range"
            [readonlyInput]="true"></p-calendar>

在文档中， 我注意到两件有趣的事情： - 事件onSelect，不幸的是它可以在普通日历上工作，我们按一次（这里我们需要按两次） - 属性：hideOnDateTimeSelect，但它似乎不是我想要的因为，因为它也不起作用。

我想我可以做这样的事情：

<p-calendar [(ngModel)]="rangeDates" 
            selectionMode="range"
            [readonlyInput]="true"
            (onSelect)="onSelect()"></p-calendar>

private dateSelected() {
    if (this.rangeDates[0] !== null && this.rangeDates[1] !== null) {
    //really dont know how to do "close" right now.
    }
}

初学者问题。错误说它找不到变量：“查看”

我编写了这段代码是为了将设计集成到我的代码中，但它给出了：“找不到变量：查看”我错过了什么

import React from 'react';
import {StyleSheet} from "react-native" ;




export default class MenuButton extends React.Component {
    render() {
        return (
            <View menu={burger.menuIcon}>
            </View>
        )
    }
}

const burger = StyleSheet.create({
    menuIcon: {
color    : 'rgba(255,255,255,0.0)',
  top                 : 17 ,
  height              : 5 ,
  width               : 6 ,
  position            : 'absolute' ,
  margin              : 0,
  left                : 26 

}});

我希望一个没有错误的空白屏幕

我正在使用 Gatsby 和 React 开发一个网站。而且我发现每次刷新页面，都会加载 1.6 MB / 1.6 MB 的资源。我是网络开发的新手，所以我真的不知道这是下载很多还是只是中等数量。

但是我确实注意到一个问题，即在我在 Netlify 上部署我的网站后，字体文件被请求两次，因此它被下载两次。您可以在屏幕截图中看到请求了两个 Roboto-Light 文件。

这是我在代码库中包含字体文件的方式。

首先我设置了一个 webpack 别名 '@fonts': path.resolve(__dirname, 'src/fonts'),

然后在src/styles/fonts.js我有

import RobotoLight from '@fonts/Roboto/Roboto-Light.ttf';
export { RobotoLight};

最后在我的src/styles/GlobalStyle.js我有

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@font-face {
  font-family: 'Roboto';
  src: url(${fontFamilies.RobotoLight}) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
...

所以每当我需要应用这种RobotoLight字体时，我只需将元素设置font-family为Roboto.

我不知道为什么我的字体被下载了不止一次，我不知道这种包含字体的方式是否是最佳实践。我也想知道1.6 MB / 1.6 MB resources是不是太多了。

在 Angular 中，每次需要查询端点时，都需要调用以下代码：

this.service.getSomeData()
 .pipe(takeUntil(this.onDestroy$))
 .subscribe((message: any) => { 
    some code here; 
 }

takeUntil 是组件中的一个函数，用于在组件被销毁时取消订阅。

如何重构上面的代码，以便每次使用资源时都不需要键入所有这些内容？所以最后看起来像这样（或多或少？）：

this.service.getSomeData(
   (message: any) => {
     some code here;
   }
)

我在nextjs中使用html2canvas。由于nextjs 进行服务器端渲染，因此很难在nextjs中使用html2canvas。
我使用nextjs提供的动态库来导入html2canvas，现在不知道html2canvas的文档中写的导入后如何使用html2canvas功能。

导入html2canvas

const html2canvas = dynamic(() => import('html2canvas'),{ssr:false})

当我按照文档中所写的步骤运行时，错误的输出说

“html2canvas 不是一个函数”

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

我想知道如何使用它。

类已添加但未删除。当我将.closeX元素移动到相同级别时，.menu它可以工作，但在内部时则不行。

$('.menu').click(function() {
  $(this).addClass('openMenu')
})

$('.closeX').click(function() {
  $('.menu').removeClass('openMenu')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="menu">
  <div class="closeX"></div>
</section>

我有一个函数，它获取一个对象并从对所述对象的检查中返回一个布尔值。

我需要这个布尔值来决定我的 render() 函数的输出应该是什么 HTML。当在我的 render() 函数中调用检查获取的对象的函数时，它总是返回“未定义”，因为它总是评估为真。

我应该如何在适当的时间输出正确的值？谢谢你。

    async isGreenlisted() {
        return fetch(`${WEB_SERVICE_URL}/v2/banners/${this.viewId}`)
            .then(res => {
                for (let list in res) {
                    if (res[list].isDisplayed && list === "green") {
                        console.log("green true");
                        return true;
                    }
                }
                return false;
            });
    }

    render() {
        return html`
            <style>
                paper-button {
                    color: blue;
                }
            </style>
            <div>
                ${this.isGreenlisted()
            ? html`
                            <paper-button raised @click="${this._onClick}">Disable Powered By</paper-button>
                      `
            : html`
                            <paper-button raised @click="${this._onClick}">Enable Powered By</paper-button>
                      `}
            </div>
        `;
    }
}

我想使用NavLink在页面顶部显示登录按钮，react-router-dom 这是导致问题的代码

    import React, { Component } from 'react';
    import logo from '../svg/logo.svg';

    import {NavLink} from 'react-router-dom';

    class Header extends Component {
        render() {
            return (
                <div className="header-container">
                    <div className="header-top">
                       <img src={logo} alt="hdfhvbdhbhbvhxbc"/>
                       <NavLink className="signIn-btn">Sign In</NavLink>
                    </div>
                </div>
            );
        }
    }

    export default Header;

如果我注释掉import {NavLink} from 'react-router-dom';并且<NavLink className="signIn-btn">Sign In</NavLink>代码按预期呈现。

当我在 Vsstudio 中运行它时，它显示它已成功编译。但是在我的浏览器中，它向我显示了以下消息TypeError: toLocation is undefined以及以下附加消息

51 |   resolveToLocation(to, currentLocation),
  52 |   currentLocation
  53 | );
> 54 | …

前几天我看到了这个笑话。互联网上有人问我们为什么需要后端，只需将前端连接到数据库即可。

起初看起来很有趣，但真的有可能创建一个同时处理前端和后端的框架吗？

路由和列表视图或网格都发生在同一个函数中。

从技术上讲，我想不出一个原因！