小编Dim*_*huk的帖子

我目前正在学习Gatsby.js和GraphQL作为补充技术，并被查询所困扰。我想查询一个文件夹中的所有图像，将它们映射成槽并将它们显示在网格中的react组件中。我正在使用gatsby-source-filesystem，但不知道如何专门处理该文件夹并从中获取所有图像。

我为源文件系统设置的插件如下所示。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/posts`,
    name: 'posts',
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/assets/images`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `photos`,
    path: `${__dirname}/src/assets/photos`,
  },
},

我的图片在src / assets / photos中

谢谢你的帮助！

我正在学习打字稿，目前正在尝试导入我本地存储在使用 create-react-app 引导的项目中的简单 json 文件。

data.json 看起来像这样：

{
  "test": "123",
}

在我中，App.tsx我尝试使用json-loader. 双方App.tsx并data.json在同一个文件夹和进口看起来像这样：

import data from './data.json'

我已经尝试了解决这个问题的几种解决方案，但似乎没有任何效果。这些解决方案是import * as data from './data.json'和const data = require('./data.json')

我有一个应用程序，我需要在其中管理对输入的关注，为此我使用 React ref。

我有两个输入要移到单独的组件中。现在它们看起来像下面这样：

<input
  onChange={this.handleChangeOne}
  ref={refOne => (this.refOne = refOne as HTMLInputElement)}
  type="text"
/>
<input
  onChange={this.handleChangeTwo}
  ref={refTwo => (this.refTwo = refTwo as HTMLInputElement)}
  type="text"
/>

我无法让它们在单独的组件中工作，同时涉及传递 ref prop。我试过这样的事情：

<InputBlock

          handleChangeOne={() => this.handleChangeOne}
          handleChangeTwo={() => this.handleChangeTwo}
          refOne=(refOne => (this.refOne = refOne as HTMLInputElement)}
          refTwo={refTwo => (this.refTwo = refTwo as HTMLInputElement)}
        />

和组件本身

class InputBlock extends React.Component<IProps> {
  public render() {
    return (
      <React.Fragment>
        <input
          ref={refOne}
          onChange={handleChangeOne}
          type="text"
        />
        <input
          ref={refTwo}
          onChange={handleChangeTwo}
          type="text"
        />
      </React.Fragment>
    );
  }
}

export default …

我试图找出如何减少类似[[1,2,3],[1,2],[]]数组条目总和的东西.我想收到嵌套数组中元素的总数,所以这个问题的答案就是5.我不关心这些数组中的内容,只关注它们的长度.

非常感谢您的支持!

我有一个数组，它是我在componentDidMount生命周期钩子中填充的状态条目，它非常简单：

state{
      array:[{a:0,b:0},{a:1,b:1},{a:2,b:2}]
     }

但是，当我尝试访问它时，总是出现错误：

Property 'a' does not exist on type 'never'.

我想我在这里声明接口时遇到了麻烦，找不到合适的方法来做到这一点。像这样的事情可能会做：

interface IState{
     array: object[]
}

完整版组件：

import * as React from "react";
import phrasalVerbs from "../data/phrasalVerbs";

interface IAnswerOptions {
   pVerb: string;
   meaning: string;
 }

interface IState {
  pVerbs: object;
  progress: number;
  answerOptions: IAnswerOptions[];
}

class PhrasalVerbs extends React.Component<{}, IState> {
  public state = {
    pVerbs: phrasalVerbs,
    progress: 0,
    answerOptions: []
  };

  public componentDidMount() {
    this.randomVariants();
  }

  public randomVariants = () => {
    let randomVariants: …