小编Max*_*ton的帖子

在React 16.2中,增加了对支持的改进Fragments.更多信息可以在React的博客文章中找到.

我们都熟悉以下代码:

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

是的,我们需要一个容器div,但这并不是什么大不了的事.

在React 16.2中,我们可以这样做以避免周围的容器div:

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

在任何一种情况下,我们仍然需要一个围绕内部元素的容器元素.

我的问题是,为什么使用Fragment更好？它对性能有帮助吗？如果是这样,为什么？会喜欢一些见解.

我正在尝试为一个简单的React组件编写一个简单的测试,我想使用Jest来确认当我用酶模拟点击时已经调用了一个函数.根据Jest文档,我应该可以使用spyOn这个:spyOn.

然而,当我尝试这个时,我不断得到TypeError: Cannot read property '_isMockFunction' of undefined我的意思,我的间谍是未定义的.我的代码看起来像这样:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {

  myClickFunc = () => {
      console.log('clickity clickcty')
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro" onClick={this.myClickFunc}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

在我的测试文件中:

import React …

我正在重构一个基于es6类的React组件,该组件使用普通的构造函数,然后绑定方法,并在该构造函数中定义状态/属性.像这样的东西:

class MySpecialComponent extends React.Component {
  constructor(props) {
   super(props)
   this.state = { thing: true }
   this.myMethod = this.myMethod.bind(this)
   this.myAttribute = { amazing: false }
  }

  myMethod(e) {
   this.setState({ thing: e.target.value })
  }
}

我想重构这个,以便我自动绑定函数,并使用属性初始化器的状态和属性.现在我的代码看起来像这样:

class MySpecialComponent extends React.Component {
  state = { thing: true }
  myAttribute = { amazing: false }


  myMethod = (e) => {
   this.setState({ thing: e.target.value })
  }
}

我的问题是,我还需要构造函数吗？或道具也是autobound？我本来希望仍然需要构造函数和包含super(props),但我的代码似乎工作,我很困惑.

谢谢

我正在使用 React Router v5。

我遇到了需要支持以下用例的情况。

我有通过 访问的 React 组件/project/1234。/project/1234/hello但是，我还需要通过两者访问同一个 React 组件，/project/1234/goodbye.同样，所有这三个路由都需要导航到同一个 React 组件。

以下代码不起作用，因为据我所知，如果我导航到/project/1234/goodbye，react-router 会将其解释为我将“再见”作为参数的值传递，因此如果我使用react-router 的钩子:hello以编程方式询问参数useParams()本身，我就会得到错误的参数值。

<Route
   path={'project/:context/:hello?/:goodbye?'}
   render={matchProps => <Project {...matchProps}/>}
/>

换句话说，如果导航到/project/1234/goodbye然后执行以下操作：

const params = useParams()
console.log(params.hello)

params.hello将返回“再见”

同样，这不起作用，因为使用数组/project/1234/goodbye总是首先匹配/project/1234，因此我不会使用useParams()react-router提供的钩子获得任何传递的参数。

<Route
   path={['project/:context', 'project/:context/:hello?', 'project/:context/:goodbye?']}
   render={matchProps => <Project {...matchProps}/>}
/>

我可以这样：

<Route
   path={'project/:context'}
   render={matchProps => <Project {...matchProps}/>}
/>

但是，当我使用react-router的useParams()钩子时，我将无法询问参数:goodbye或:hello

有人知道如何使用 React Router 来实现这一点吗？或者我只需要声明单独的路线？

我觉得这是一个超级初学者的问题,有一个明显的答案,但我很想念它.

我正在安装一个包含gem的Rails项目,要求我使用2.2.2或更早版本的Ruby版本.由于我当前的系统是使用较新版本的Ruby设置的,因此当我运行时bundle install,它会失败,因为其中一个gem不能与最新版本的Ruby一起安装.

所以,我设置我的系统使用ruby 2.2.2与rvm , rvm use ruby-2.2.2.

我然后运行bundle install并获得zsh: command not found: bundle.为什么是这样？我的所有其他命令都可以工作,我可以单独安装问题gem gem install.

我错过了什么？

我使用 Flex 时的边距出现了一些意外的行为，我需要一些帮助来理解原因。

我有一些简单的 html，如下所示：

<div className="dashboard">
    <div className="dashboard__inner-container">Inner Container</div>
</div>

我的 scss 文件如下所示：

.dashboard {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: #f4f6f8;
}

.dashboard__inner-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 1 1 auto;
  width: 100%;
  margin: 100px 50px;
}

我期望的是内部容器将完全填满父容器，顶部和底部减去 100px，左右减去 50px。垂直边距按预期工作，但水平边距实际上延伸到父 div 之外，因此内部容器看起来仍然占据了父 div 的整个宽度。

我不确定这是否与 Flexbox 有关。

这是一个孤立的 CodePen https://codepen.io/MaxMillington2/pen/EQWZoj