小编me-*_*-me的帖子

新的反应和减少,所以玩一些非常简单的代码,看看它是如何工作的.当我尝试将combineReducers方法传递给redux存储时,我得到一个错误.如果我删除combinedReducers并将reducer直接传递到商店,一切正常.

let store = createStore(rootReducer);

错误

未捕获错误:对象无效作为React子对象(找到:具有键{reducer}的对象).如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象.检查App的渲染方法.

使用combineReducers时为什么会出错？如果我想添加更多减速器怎么办？我认为这是什么结合了减速器？

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';

import App from './components/app';

let reducer = (state=0, action) => {
  switch (action.type) {
    case 'INCREASE': 
            return state+1
    case 'DECREASE': 
            return state-1
    default: return state
  }
}

const rootReducer = combineReducers({
    reducer:reducer
});

let store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.querySelector('.container'));

//app.js

import React, { Component …

我在一个名为button-actions的模块中有一个函数,当用户单击后退按钮时会调用该函数.我想直接测试backButtonActions方法,但需要在被调用的backButtonActions中模拟leaveApp和displayById方法.

这是我的button-actions.js文件方法.

export function backButtonActions( label, page ){      //, page
    console.log("LABEL = ", label, "  page = ", page);
    switch( label ){
        case 'step1':
            page.leaveApp();
            break;
        case 'step2':
            page.displayById();
            break;
    }
}

我是测试的新手,所以我可能会遗漏一些非常简单的东西.下面是我的test.js文件

   window.$ = require('jquery');
    import {backButtonActions} from '../button-actions';


    describe('Button Actions', () => {

        const page = {}

        beforeEach(() => {

            page.leaveApp = jest.fn(() => "leave");
            page.displayById = jest.fn(() => "Display");

            document.body.innerHTML =
                '<div>' +
                '  <button class="btn-back" />' +
                '</div>';

                 $('.btn-back').click((event, label) =>{
                     backButtonActions( …

我试过用

brew install yarn@1.7.0 --without-node

要么

brew install yarn@1.7.x --without-node

但是我收到以下错误

Error: No available formula with the name "yarn@1.7.0" 
==> Searching for a previously deleted formula (in the last month)...
Warning: homebrew/core is shallow clone. To get complete history run:
  git -C "$(brew --repo homebrew/core)" fetch --unshallow

Error: No previously deleted formula found.
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
==> Searching taps...
==> Searching taps on GitHub...
Error: No formulae found in taps.

我认为可以使用brew安装不同版本的纱线吗？

更改节点的nvm版本时，我遇到了yarn的问题。当我检查〜/ .nvm文件夹时，我注意到有两个节点版本。

• v8.11.0
• v8.11.3。

我在全球安装了yarn。我在使用v8.11.0时使用npm install -g yarn。

我可以看到我的纱

.nvm/versions/node/v8.11.0

但是，当我切换到nvm v8.11.3或将我的nvm别名默认设置为v8.11.3时，
纱不再可用。我尝试再次进行全局安装，希望将其添加到我的v8.11.3文件夹中，但它一直尝试将其添加到v8.11.0中

我什至删除了文件夹v8.11.0，但是在运行npm install -g yarn时它会重新创建它

如何安装它，以便可以在nvm中使用任何节点版本开关使用yarn

我正在尝试创建一个更高阶的组件，但不断收到这个 eslint 警告。

组件定义缺少显示名称

我尝试添加如下所示的显示名称，但它仍然抱怨。

import React from 'react';

const HOC = props => (WC) => {
  WC.displayName = 'test'
  return (
    <WC />
  );
}

export default HOC;

有没有办法通过将scss文件中的process.env.NODE_ENV传递给web-pack中的sass-loader来引用它.如果是这样,任何人都知道如何去做？

这是我的webpack模块lodaers数组.

module: {
    loaders: [
      { test: /\.js?$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '../app'),
        exclude: /node_modules/
      },
      { test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles')
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include : path.join(__dirname, '../app', 'images'),
        loader  : 'file-loader?limit=30000&name=[name].[ext]'
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        include : path.join(__dirname, '../app', 'fonts'),
        loader: 'file-loader?name=fonts/[name].[ext]'
      }
    ] 

我甚至试过了

      { test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles'),
        options: {
          data: "$env: " + process.env.NODE_ENV + ";"
        }
      }

但上面打破了构建.我只想要一种方法来访问我的scss文件中的URL,具体取决于环境.它不一定是通过webpack,没有硬编码它会有任何想法.例如:

  .contact-transparent{
    width: 100%;
    height: 100%;
    background: url(process.env.NODE_ENV+'/home-background.jpg') …

有没有办法获得 React 组件子项的宽度。我有一个包装器组件，因为缺少名称 Container 并且我从 Component1 向它添加了 div 类型的子项。见下面的例子。我想知道是否有办法在挂载时获取 Container 中每个 div 子项的宽度。

更新说明： 我尝试获取容器子项宽度的原因是我可以根据子项总数动态设置容器宽度。通过将容器宽度设置为儿童宽度的数量，然后我可以允许一些我想做的水平滚动效果。

组件 1

export default class Component1 extends Component{
render(){
  return(
    <Container>
        <div className="large-box"/>
        <div className="large-box-dark"/>
    </Container>
  )
 }
}

现在我的容器组件。

    export default class Container extends Component{
      componentDidMount(){
        this.props.children.forEach(( el ) => {
        // get each child's width 
        console.log("el  =", el);
      });
      }


  render() {
    return (
      <div className="scroller" ref={(scroller) => { this.scroller = scroller }}>
        {this.props.children}
      </div>
    )
  }
 }

我试图弄清楚如何更新单个快照文件。在文档中，它说只需添加-t，然后我假定文件名，但这对我不起作用。

例如，在终端中我使用。

jest -u -t test/js/tests/components/myTestApp.test.js

任何想法为什么这将不起作用。我也将其添加为字符串。

我在其match> params对象中从React路由器传递了道具,我希望在我的静态propTypes中将其设置为必需的字符串值.当我将其设置为照片时:PropTypes.string.isRequired我收到错误.

Warning: Failed prop type: The prop `photo` is marked as required in `BlogEntry`, but its value is `undefined`.

当我通过路由器道具记录下来的内容时,我可以看到照片是一个字符串ID.

const {match:{params:{photo}}} = this.props;
console.log("photo = ", photo);
// result: 
photo =  5a03c474e1bbc026de896aa8

有没有办法在照片上进行必要的类型验证？

这是我的设置.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {fetchBlogEntry} from '../../actions/index';
import BlogPost from '../../components/client/blog-post';

class BlogEntry extends Component{

  constructor(props){
    super(props);
    console.log('constructor = ', this.props.match.params.photo);
  }

  static propTypes={
    entry: PropTypes.object.isRequired,
    photo: PropTypes.string.isRequired
  }

  componentWillMount(){
    const {match:{params:{photo}}} = this.props; …

我正在使用 gatsby js 并试图弄清楚如何使用 Gatsby 链接在同一页面的 div 内呈现新组件的页面级侧边栏我可以使用 react-router-dom 来做到这一点，但在 Gatsby 中我可以做到find 是如何创建博客文章这让我发疯，因为我找到的每个教程都是相同的博客文章。

这是我的布局页面 /layouts/index.js

export default ({ children }) => (
  <div id="layout">
    <header>
      <h3>Header</h3>
      <MainNav />
    </header>
    {children()}
  </div>
)

关于页面 /pages/about.js

export default ({ location, match }) => {
  console.log('location = ', location, 'match = ', match );
  return (
    <div id="about">
      <SideBar />
      <div id="content">
        // . add child template or component for link clicked in sidebar
      </div>
    </div>
  );
};

我想要做的是，当用户单击侧边栏中的链接时，会停留在 about 上，但会根据在 about 侧边栏中单击的 …