小编Dan*_*ich的帖子

我目前正在他们方便的 typescript starter 的帮助下构建一个基本的 nextjs 网站。在开发过程中，一切都运行得很顺利yarn dev，直到大约 20 分钟前，每当我尝试运行时，我都会随机收到一条错误消息yarn dev。

这是错误输出：

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react by running:

        yarn add --dev @types/react

这只是随机开始发生的，没有对代码库进行任何更改。我尝试完全擦除node_modules并重新安装，甚至尝试清理纱线缓存。该依赖项"@types/react": "^18.0.2"已正确包含在我的 package.json 的devDependencies对象中，因此我完全不知道如何解决此问题。

PS 我发现这里发布了一个关于此问题的现有问题，但它与我的问题根本无关，因为它与 Docker 有关。我所做的只是在我的笔记本电脑上本地运行 next.js，它不在任何地方的生产环境中运行。

我希望正确注释Home函数组件的参数，但遇到了一些麻烦。我希望将其注释为：{ events }: { events: Event[] }，但收到 TypeScript 错误，Property 'events' does not exist on type '{ children: ReactNode }' in Next.js。

接下来在幕后做了很多魔法，所以我不确定如何解决这个问题。有任何想法吗？

import type { NextPage } from 'next';
import { GetServerSideProps } from 'next';
import axios from '../lib/axios';

import { Event } from '../ts/interfaces';

const Home: NextPage = ({ events }) => {
  return (
    <div>
      {events.map((event: Event) => (
        <div key={event.title}>{event.title}</div>
      ))}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async () …

过去一个小时我一直在 Github 和 Stack Overflow 上搜索，但没有找到关于如何使用 ES-Lint 解决这个问题的答案。

.eslintrc.json

{
  "parser": "babel-eslint",
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier", "flowtype"],
  "rules": {
    "prettier/prettier": ["error"],
    "no-unused-expressions": 0,
    "react/jsx-filename-extension": 0,
    "class-methods-use-this": 0,
    "default-case": 0,
    "import/no-unresolved": 0,
    "react/prefer-stateless-function": 0,
    "import/no-named-as-default": 0
  },
  "parserOptions": {
    "sourceType": "module",
    "import/extensions": [".jsx", ".js"],
    "allowImportExportEverywhere": true
  }
}

开发依赖

"devDependencies": {
    "@babel/plugin-transform-runtime": "^7.1.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.7.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-flowtype": "^2.34.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.1",
    "flow-bin": "0.78.0",
    "jest": "23.5.0",
    "jest-react-native": "18.0.0",
    "metro-react-native-babel-preset": "^0.45.0",
    "prettier": …

我喜欢认为自己有一些严重的 CSS 狂妄（我也是一个 PHP hack，并且非常擅长 Javascript），但是今天我正在与一位设计师谈论一个特定的情况，老实说我只是不知道答案它。我希望有人能详细说明这个问题。

设想：

我听到很多人说，“哦，由于响应式设计，我对所有内容都使用百分比”，但是当你去查看他们的 css 时，你会发现他们到处都使用 px 作为边距、填充等。

我的问题是我应该使用像素吗？我想说，我理解这一点的主要痛点是高分辨率屏幕。

例如，我正在创建一个非常简单的“英雄”，其中我将容器的高度设置为 700 像素高，并带有背景图像和一些文本，同时将其宽度设置为 100%。在我的屏幕上创建它，它显示了我屏幕的完整高度（这是意图），但是当我让其他人在更高分辨率的笔记本电脑屏幕上查看它时，图片的高度明显更短，下面有空白它未能填满屏幕的整个高度。

我正在寻找某人来准确解释像素值在更高分辨率的屏幕上受到的影响，以及是否应该始终使用百分比。

例如，如果我在“正常”分辨率屏幕上将容器设置为 300 像素宽，那么该容器在更高分辨率的屏幕上是否会为 150 像素宽，并且看起来会缩小且可怕？

假设我开始使用百分比来表示边距和填充等内容，我很好奇 css 将如何计算它？例如，假设我有一个联系表单，其中有许多输入堆叠在一起，我会执行如下操作：

input {
  margin-bottom: 2.5%;
}

css 从哪里计算 2.5%？它是否说，“将边距底部设为其父级高度的 2.5%？我只是对它的基础是什么感到困惑。

任何意见都将受到高度赞赏。谢谢。

我目前使用两个导出语句设置了我的 Redux 连接的 React 组件，以便更容易地对组件进行浅层测试。我刚刚开始实现 propTypes，并且遇到了 Redux 连接组件的问题。

以下是其中之一的示例：

export class SecondaryHeader extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { detail, toggleDetail, survivorsActive } = this.props

    return (
      <div className="secondary-header">
        <div className="container-fluid">
          <div className="row">

            <FontAdjust />
            <ColumnTwo detail={detail} survivorsActive={survivorsActive} />
            <ColumnThree detail={detail} toggleDetail={toggleDetail} />

          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    detail: state.detail,
    survivorsActive: state.journey.survivorsActive
  }
}

SecondaryHeader.propTypes = {
  detail: PropTypes.boolean,
  toggleDetail: PropTypes.func,
  survivorsActive: PropTypes.boolean
}

export default connect(mapStateToProps, …

在我的React / Redux / ReactRouterV4应用程序的一小部分中，我具有以下组件层次结构，

- Exhibit (Parent)
-- ExhibitOne
-- ExhibitTwo
-- ExhibitThree

在展览的孩子中，也可以绘制大约6种不同的可能路线。不用担心，我将用一些代码进行解释。

这是我的家长展览组件：

export class Exhibit extends Component {
  render() {
    const { match, backgroundImage } = this.props

    return (
      <div className="exhibit">
        <Header />
        <SecondaryHeader />

        <div className="journey"
          style={{
            color: 'white',
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center-center'
          }}>

          <Switch>
            <Route path={`${match.url}/exhibit-one`} component={ExhibitOne} />
            <Route path={`${match.url}/exhibit-two`} component={ExhibitTwo} />
            <Route path={`${match.url}/exhibit-three`} component={ExhibitThree} />
            <Redirect to="/" />
          </Switch>
        </div>
      </div>
    )
  }
}

基本上，它所做的全部工作就是显示一个展览子组件，并设置背景图像。

这是ExhibitOne子组件之一：

export default …

我偶然发现了一个涵盖Big O的免费CodeAcademy课程,并且在我遇到一个特定问题之前就已经过去了.这似乎很容易,但我不知道为什么我这么艰难.

var people = ["Alice", "Bob", "Carol", "Dave", "Ed", "Mark", "Tom", "Lisa", "Sarah"];

任何人都可以提供一些见解,我将如何打印出这个阵列中所有可能的对组合？例如,它应该打印出来

Alice, Bob
Dave, Mark
Ed, Lisa

此外,它说没有一对应该与自己配对,或重复已经存在的配对.例如,如果我们已经有"Ed,Lisa",它就不应该打印"Lisa,Ed".

我开始两个循环,然后合法只是不知道从那里去哪里令人沮丧!

var people = ["Alice", "Bob", "Carol", "Dave", "Ed", "Mark", "Tom", "Lisa", "Sarah"];

for(var i = 0; i < people.length; i++){

   for(j = 0; j < people.length; j++) {
       // some fancy stuff here
    }
}

解决方案实际上并不需要在Javascript中(但会很好),也许PHP或Java也可以工作.