小编pet*_*gan的帖子

我希望澄清一些事情。

ES6 为我们带来了扩展的参数处理，并使我们能够传递默认参数值。

function f (x, y = 7, z = 42) {
    return x + y + z
}

f(1) === 50

这工作正常。但是，如果我交换参数使它们看起来像这样，(x = 7, y, z = 42)它会返回NaN.

function f (x = 7, y, z = 42) {
    return x + y + z
}

f(1) === 50

谁能解释为什么会这样？

我正在使用React的componentDidUpdate生命周期方法.

我试图确定两个数组是否相同.

我的prevState数组看起来像这样:

prevState.players = [
  {
    name: 'Wayne Rooney',
    age: 31
  }, 
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

并且this.state数组看起来像这样:

this.state.players = [
  {
    name: 'Wayne Rooney',
    age: 31
  }, 
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

正如您所看到的,如果您展开下面的代码段,它们就不相同:

let playersOne = [{
    name: 'Wayne Rooney',
    age: 31
  },
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: …

我使用redux reducer将对象添加到状态数组.这是正常的,但是,对象被添加到数组的末尾.我已经搜索了高低,但无法弄清楚如何使用这种语法,而不是改变数组并将对象添加到数组的开头.

export default (state = [], action) => {

    switch(action.type) {

    case 'MOVIE_ADDED_TO_WATCHLIST':

            return [
                ...state,
                action.movie
            ];

        }

...****rest of the reducer here****.....

我正在使用 React 路由器来更改路由。当我在本地开发时，这很有效。

我的路由器代码看起来像这样，一切正常。

<Router>
    <Route exact path="/" render={(routeProps)=> <Homepage {...routeProps} />}/>
    <Route path="/graph" render={(routeProps)=> <AboutPage {...routeProps} />}/>            
</Router>

我遇到的问题是当我将它部署到我的 github 页面时，http://exampleuser.github.io/react-project.

由于项目位于 react-project 文件夹中，因此它"/"指的是实际路线http://exampleuser.github.io/

任何人都可以建议路径应该如何显示以便在部署时工作？

我正在使用react和 lodash 的debounce方法。我遇到的问题是当用户调整窗口大小时更新状态。

我遇到的问题是，当用户在此函数中调整窗口大小时，this它指的window是与组件相反的组件：

window.addEventListener('resize', this.delayedCallback)

我尝试过设置const that = this等，但无法获得正确的范围。有谁知道如何解决这个问题？

见下面的代码：

class Card extends Component {

  constructor(props) {
    super(props)
    this.state = {
      cardElWidth: null
    }
    this.delayedCallback = debounce(this.setCardWidth, 1000);
    this.CardEl = React.createRef()
  }

  componentDidMount () {
    this.setCardWidth()
    window.addEventListener('resize', this.delayedCallback)
  }

  setPlayerCardWidth() {
    this.setState({
      cardElWidth: this.CardEl.current.offsetWidth
    })
  } ... rest of code

我正在尝试使用react挂钩来确定用户是否在元素外部单击。我useRef用来获取对该元素的引用。

谁能看到解决方法。我从这里得到以下错误和答案。

属性“包含”在类型“ RefObject”上不存在

上面的错误似乎是打字稿问题。

这里有一个带有不同错误的代码沙箱。

在这两种情况下，它都不起作用。

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Menu = () => {
    const wrapperRef = useRef<HTMLDivElement>(null);
    const [isVisible, setIsVisible] = useState(true);

    // below is the same as componentDidMount and componentDidUnmount
    useEffect(() => {
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('click', handleClickOutside, true);
        };
    }, []);


    const handleClickOutside = event => {
       const domNode = ReactDOM.findDOMNode(wrapperRef);
       // …

我有以下svg组件来传递道具。

import React from 'react';
export default (props) => (
  <svg {...props}>
    <path
      d="M11.5 16.45l6.364-6.364"
      fillRule="evenodd"
    />
  </svg>
);

然后我有一个styled-component看起来像这样的。

const Icon = styled(_Icon)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`;

我看到以下react错误。

警告：React 无法识别isActiveDOM 元素上的 prop。

如何.在字符串中的最后一个后面获取所有文本.例如,

const string = 'user.teams.firstWord,secondWord';

它永远是模式,

x.y.wordOne,wordTwo

在哪里我想提取wordOne和wordTwo

在这种情况下,我要寻找的结果是firstWord,secondWord;

我尝试了很多方法,但无法弄清楚.

我的最新尝试看起来像

const [first, second] = string.split('.').pop().split(',');

这是一个直截了当的问题，但在switch声明中可以不返回default状态吗？

switch 语句位于 React 组件中，如下所示。

const App = (chosenTeam) => {
    const renderSection = (team) => {
        switch (team) {
          case 'LFC':
            return <Liverpool />;
          case 'MUFC':
            return <TerribleTeam />;
          case 'Chelsea':
            return <Blues />;
        }
    }

    return {renderSection(chosenTeam)}
}

我在一个函数中有两个类，由于某种原因，第二个函数this没有被正确识别。

类是Emitter和Receiver。

我想弄清楚为什么this这里没有被正确接收。日志包含在下面的代码中：

const chat = (messages) => {
  class Emitter {
    constructor(messages = []) {
      this.messages = messages;
      this.event = () => {};
    }

    setEvent(fn) {
      this.event = fn;
    }

    trigger() {
      this.messages.forEach(message => this.event(message));
    }
  }

  class Receiver {
    constructor() {
      this.messages = [];
      // this prints correctly here
      ---> Receiver { messages: [] }
      console.log('this  ===> ', this)
    }

    ping(message) {
      console.log('this ===>', this)
      // this here prints the …