小编Had*_*bar的帖子

我有一个滚动事件侦听器，我想根据页面 URL 删除它，如何在钩子组件中使用它来处理它？

 useEffect(() => {
    function handleScrollEvent() {
      if (window.scrollY > 100) {
        setHeaderIsVisible(true);
      } else {
        setHeaderIsVisible(false);
      }
    }
    if (props.location.pathname === "/") {

      window.addEventListener("scroll", handleScrollEvent, true);
    } else {
      window.removeEventListener("scroll", handleScrollEvent, true);
    }
  }, [props.location.pathname]);

我应该在哪里定义 handleScrollEvent 以将其从侦听器中删除？

我正在尝试使用 webpack 排除未使用的 momentjs 区域设置。我尝试过以下三种方法：

1- moment-locales-webpack-plugin

new MomentLocalesPlugin({
    localesToKeep: ["en"]
  })

2-ContextReplacement插件

 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)

3-忽略插件

new webpack.IgnorePlugin(
  /^\.\/locale$/,
  /moment$/
});

但是，这些方法都不适合我，所有语言环境仍然存在于最终包中。我的 webpack 版本是 4.28.2。我正在使用 moment-js v 2.23。

我有一个像这样的钩子组件：

import React, { useState} from "react";

    const MyComponent = props => {
      const [value, setValue] = useState(0);
      const cleanValue = () => {
        setValue(0);
      };

      return (<span><button onClick={()=>setValue(1)}/>{value}<span>)
    }

我想重置父组件的值。如何调用父组件的纯净值？父组件是有状态组件。

我有一个 useInput 钩子组件，其工作方式如下：

useInput(
    <input placeholder="phone number" />,
    "phone"
  )

它获取一个 (input,inputName) 并返回一个挂钩的输入组件。当我想在视图中动态更改现有输入的可见性时，出现错误：渲染的钩子比上一次渲染期间多。

{this.state.showMyInput && useInput(
        <input placeholder="phone number" />,
        "phone"
      )
}

我有一个简单的SPA，App和About组件如下所示。当我单击“关于”链接时，“关于”页面将显示在链接下方。问题是，当我单击“关于我”链接时，将加载“我”页面而不是“关于”页面。我真正想要的是在nextjs中嵌套路由。似乎一级路由正在加载中。但是我不知道如何将其添加到我的子组件中。

import App, { Container } from 'next/app'
import React from 'react'
import Link from 'next/link'
class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps }
  }
  render() {
    const { Component, pageProps } = this.props
    return <Container>
      <ul>
        <li><Link href="/news">News</Link></li>

        <li><Link href="/about">About</Link></li>
      </ul>
      <Component{...this.props} />
    </Container>
  }
}
export default MyApp


import React from 'react'
import Link from 'next/link'
import …

我正在通过 JSX 使用 Reactjs。在这种方法中是否有任何安全的导航操作符可以使用？我尝试使用像“foo?.bar”这样的问号运算符，但出现语法错误。

我没有将 Webpack 配置用于 React SSR。相反，这是我的配置：

require("@babel/register")({
  presets: ["@babel/preset-env", "@babel/preset-flow", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-dynamic-import-node",
    "@babel/plugin-transform-modules-commonjs",    
    [
      "module-resolver",
      {
        root: ["./src"]
      }
    ]
  ]
});

require("ignore-styles");

module.exports = require("./server.js");

问题是 css 类在呈现的 html 中未定义。我怎样才能解决这个问题？

我使用 Leaflet 作为我的地图组件。当地图最初加载时，我想以相同的缩放级别预加载附近的图块。做到这一点的最佳解决方案是什么？

我使用angular $ http从服务器下载文件.文件类型可以不同.我应该设置请求标头以进行身份​​验证.下载完成后,文件已损坏!这是我在客户端的代码来保存文件:

getFile: function(file) {
    $http({
        method: 'GET',
        url: 'download' + "/" + file.name,
        headers: {
            "X-AUTH-TOKEN": "my-token",
            Accept: "*/*",
        }
    }).success(function(data) {
        var fileBlob = new Blob([data], {
            type: '*/*;charset=utf-8'
        });
        saveAs(fileBlob, file.name);
    }).error(function(err) {
        console.log('err', err);
    });
}

我在我的应用程序中使用 useImperativeHandle 钩子来访问父组件的值：

const [phone,setPhone]=useState("");
 useImperativeHandle(
    ref,
    () => ({
      type: "text",
      name: "phone",
      value: phone
    }),
    [phone]
  );

当我使用 setPhone 更新手机时，值不会更新。我的实现有什么问题？

我在我的反应代码中使用了传单，我没有使用反应传单。我想将反应组件或 jsx 代码传递给 binbPopup 函数到每个工具提示。

let marker = new L.marker(...).bindPopup(<div>Hi</div>)

bindPopup 获取字符串作为输入，所以我不能使用 jsx。我也尝试使用反应门户，但仍然无法正常工作。这个问题的解决方案是什么？

我对 Kafka 消费者的配置位于 application.yaml 文件中。我知道如果我只有 1 个消费者，我不需要创建 ConsumerFactory bean，它会默认由 spring 设置。我需要测试我的消费者，因此我需要访问测试文件中的消费者对象，并且我不想再次配置它（我想使用 application.yaml 中的默认配置）文件来创建消费者对象。这怎么可能？