小编R. *_*sch的帖子

我现在正在用 React 构建一个旋转木马。要滚动到我使用的单个幻灯片，document.querySelector如下所示：

useEffect(() => {
    document.querySelector(`#slide-${activeSlide}`).scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'nearest'
    });
  }, [activeSlide]);

这是不好的做法吗？毕竟，我在这里直接访问 DOM？这样做的 React 方式是什么？

编辑：完整return方法

return (
    <>
      <button onClick={() => setActiveSlide(moveLeft)}>PREV</button>
      <Wrapper id="test">
        {children.map((child, i) => {
          return (
            <Slide id={`slide-${i}`} key={`slide-${i}`}>
              {child}
            </Slide>
          );
        })}
      </Wrapper>

      <button onClick={() => setActiveSlide(moveRight)}>NEXT</button>
    </>
  );

我.attrs()在 styled components 中遇到了这个函数，但我不明白它的作用，或者它有什么不同？

我试图理解他们文档中的示例，但就我而言，我可以在没有该attrs()功能的情况下做完全相同的事情。

有人可以向我解释一下或举一个简单的例子吗？

我正在尝试向我的 mailchimp 帐户发出 axios 请求。但它似乎不起作用。我不能让它授权我 - 我在这里做错了什么？我一直在关注本教程：其中说：

API 有 2 种身份验证方法：HTTP 基本身份验证和 OAuth2。最简单的身份验证方法是使用 HTTP 基本身份验证。输入任何字符串作为您的用户名，并提供您的 API 密钥作为密码。您的 HTTP 客户端库应该具有对基本身份验证的内置支持，但这里有一个快速示例，展示了如何使用 curl 中的 --user 选项进行身份验证：

curl --request GET \
--url 'https://<dc>.api.mailchimp.com/3.0/' \
--user 'anystring:<your_apikey>'

所以我实施了：

axios.post('https://us1.api.mailchimp.com/3.0/lists/xad81287/members/', {
      auth:
        {
          url: 'https://us1.api.mailchimp.com/3.0',
          user: 'blabla:11231h23123j14bhj1b23j12-us1' //this is my API key
        },
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

（我在这里随机更改了 API 内容并列出了名称）

我得到的错误：

选项https://us1.api.mailchimp.com/3.0/lists/afafaf/members/ 401（未授权） dispatchXhrRequest @ xhr.js:178 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:59 …

我正在使用gatsby-plugin-alias-imports能够像这样进行绝对导入：import { colors } from "@styles/theme";这是在gatsby-config. 现在我刚刚在我的项目中添加了故事书。由于 storybook 没有通过 gatsby 运行，别名导入将无法解析，我收到一个错误：

./src/components/Button/index.js 中的错误未找到模块：错误：无法解析“@styles/theme”...

这是有道理的。Storybook 不知道如何处理@styles...- 但我该如何解决这个问题？

尝试gatsby-node通过外包一些代码来重构我的文件。现在正在尝试在我的中执行此操作gatsby-node：

const createBlogPostPages = require("./gatsby-utils/createBlogPostPages");

exports.createPages = async ({ actions, graphql, reporter }) => {
  //...some code
  await createBlogPostPages({ actions, graphql, reporter });
  //...some code
}

mycreateBlogPostPages位于不同的文件中，如下所示：

const path = require("path");

module.exports = async function({ actions, graphql, reporter }) {
  const { createPage } = actions;

  const blogArticles = await graphql(`
    {
      allMdx(filter: { fileAbsolutePath: { regex: "/content/blog/.*/" } }) {
        edges {
          node {
            id
            fileAbsolutePath
            fields {
              slug
            }
            frontmatter {
              title …

试试这个：

const styledDiv = styled.div`
  ${props => props.takeViewportHeight && `min-height: calc(100vh-16px);`}
`

它不起作用。我是否在样式组件中遗漏了有关 calc 的内容？

const fetch = require("node-fetch"); 

async function getPokemon() {
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/1');
  console.log(response);
  return response;
}

getPokemon();

我不确定这是否有效.我回来了:

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]:
   { body:
      Gunzip {
        _readableState: [ReadableState],
        readable: true,
        _events: [Object],
        _eventsCount: 7,
        _maxListeners: undefined,
        _writableState: [WritableState],
        writable: true,
        allowHalfOpen: true,
        _transformState: [Object],
        bytesWritten: 0,
        _handle: [Zlib],
        _hadError: false,
        _writeState: [Uint32Array],
        _outBuffer:
         <Buffer 7b 22 61 62 69 6c 69 74 69 65 73 22 3a 5b 7b 22 61 62 69 6c 69 …

我有一个简单的反应组件：

import React from "react"
import axios from "axios"

export default () => {
  const axios = require("axios")

  axios.get("http://localhost:8000/user").then(function(res) {
    // handle success
    console.log(res)
  })

  return (
    <div>
        Hello
    </div>
  )
}

我确实得到了一些东西，状态代码为 200，并且它执行了 console.log，但数据字段为空。这只是data: ""; 我发出的 get 请求是针对我自己的 nodejs 服务器。我应该找回当前登录的用户。这在我直接访问 URL 时有效 ( localhost:8000/user)。看起来像这样

"displayName": "thomas",
"id": "google-oauth2|197913719739127391723",
"user_id": "google-oauth2|197913719739127391723",
"name": {
"givenName": "thomas3000"
},
"emails": [
{
"value": "thomas3k@tmail.com"
}
],
"picture": "https://akfaf/afaf/photo.jpg",
"locale": "en",
"nickname": "thomas3000",
"_json": {
"sub": "google-oauth2|197913719739127391723",
"given_name": "thomas3k",
"nickname": "tom", …

我在前端有一个非常基本的 graphql 突变，我将其发送到后端。我在 by 上使用此代码graphql-request作为指南。

对于原语它可以工作：

const mutation = gql`
    mutation EditArticle($id: ID!, $title: String) {
      editArticle(id: $id, title: $title) {
        id
      }
    }
  `

现在我还希望能够更改有关文章的一些元数据，这些元数据存储在meta文章内的对象中：

...,
title: "Hello World",
meta: {
 author: "John",
 age: 32,
 ...
}

所以我的问题是：当使用graphql-request从前端发出请求时，如何将非原始对象类型作为参数传递给突变？

我已经尝试过这样的事情：

const Meta = new GraphQLObjectType({
    name: "Meta",
    fields: () => ({
      id: { type: GraphQLID },
      name: { type: GraphQLString },
      age ....
    }),
  })
   
const mutation = gql`
    mutation EditArticle($id: ID!, $title: …

我以为是PassportJSvs Auth0。。现在我刚刚发现有一个叫做passport-auth0的PassportJS 策略——这让我很困惑。有人可以向我解释一下吗？

这里说的是 Passport is authentication middleware for Node.js that can be unobtrusively dropped into any Express-based web application.- 我不确定我是否理解这一点？