小编S. *_*enk的帖子

我试图将我的头脑包裹在一些反应和它的工具中非常常见的箭头函数上.

给出以下示例:

    export default function applyMiddleware(...middlewares) {
      return (createStore) => (reducer, preloadedState, enhancer) => {
        // snip actual enhancer logic

        return {
            ...store,
            dispatch
        }
    }
}

用语言描述上述内容:

1. 我们的导出函数(applyMiddleware)采用带有spread的数组参数.
2. 然后applyMiddleware返回一个带有createStore参数的无名函数,该参数这次返回另一个无名函数,带有三个参数.

所以没有箭头,它看起来像这样:

export default function applyMiddleware(...middlewares) {
  return function(createStore){
      return function(reducer,preloadedState,enhancer){
        //some logic

          return{...store,dispatch}
      }
    }
}

我的问题:

1. 我对么？
2. 我们在这里看到的常见用例/代码范例是什么？

在 javascript 中我们可以执行以下操作：

var someString = `some ${myVar} string`

我有以下lua代码，myVar是一个需要放在方括号中的数字：

splash:evaljs('document.querySelectorAll("a[title*=further]")[myVar]')

当用户通过锚链接导航到页面时,我希望页面向下滚动到我的锚标签.

我正在使用react-router 4,我已经定义了如下内容:

导航栏:

export default (props) => {
  const { 
    updateModal,
    updateRoute,
  } = props
  return(
    <Navbar fluid collapseOnSelect>
      <Nav>
        <NavDropdown eventKey="4" title="Solutions" id="nav-dropdown" noCaret>
          <MenuItem eventKey="4.1">
             <Link to='/solution#ipos'>TESTING ANCHOR</Link>
          </MenuItem>
...

一些路线:

export default class extends Component {
  constructor() {
    super()
    this.state = {
      isLoading: true
    }
  }
  render() {
    return (
      <Grid className='solutions' fluid>
       <Row className='someClass'>
        <div>
          <h2><a href='ipos' id='ipos'>Ipos morna santos paros</a></h2>
          ...

当我点击navebar中的锚链接时,我可以在url和我的redux商店中看到哈希锚标记,它确实导航到新路由,但它不会向下滚动到标记本身.

是由我来创建滚动功能还是它应该如何正常工作？

我正在基于组件拆分我的代码,我只想在组件加载时注入我的reducer,而不是从商店的开头堆叠它们.

在反应路由器3中它非常直接,但我似乎无法使它与反应路由器4一起工作.

这是减速器和商店:

reducers.js

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

import modalReducer from '../modules/modal'

export default combineReducers({
  routing : routerReducer,
  modal   : modalReducer
})

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [
  thunk,
  routerMiddleware(history)
]

if (process.env.NODE_ENV === …

编辑

我的初始问题包括具有分裂点的路线,但我已将其简化为仅在彼此之间嵌套子路线的最简单用例.

作为参考我正在使用流行的react-redux-starter-kit,我试图在我的路由中添加一个简单的包装器组件,如下所示:

export const createRoutes = (store) => ({
      path: '/',
      component: CoreLayout,
      indexRoute: Home,
      childRoutes: [{
        component: TransitionWrapper,
        childRoutes: [
          CounterRoute(store)
          ]
      }]
    })

但我得到以下错误,我的子路线没有呈现:

Warning: Failed prop type: Required prop `children` was not specified in `CoreLayout`.
    in CoreLayout (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by AppContainer)
    in div (created by AppContainer)
    in Provider (created by AppContainer)
    in AppContainer

所以基本上如果我在儿童路线上筑巢儿童路线,我会抱怨失踪儿童.

这是完整的设置:

main.js

const MOUNT_NODE = document.getElementById('root')

let render = () => …

我已经编辑了CodePen示例,在中心div上添加了一些内容div,所有容器div都显示高度,显然不起作用请看这里:

https://codepen.io/anon/pen/OEBxNr

这些线似乎导致下面的差距:

.container {
   ... 
   -ms-grid-rows: 1fr 1fr 1fr;
}

.top {
   ...
   height 8.4rem;
}

但我仍然留下第二个问题,可以在上面的CodePen中看到.

我有一个应用程序容器,其中包含顶部的导航,中间的页面和底部的页脚.我的布局在除IE和Edge之外的所有浏览器中都能正常工作.

下面的代码在第二行和第一行之间创建了一个间隙.第二个问题是页面的大小远远超出任何内容.

body, html {
  height: 100%;
}

.container {
    background:cyan;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(auto, auto);
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    height: 100%;
}

.top {
  background: yellow;  
  height: 8.4rem;
  position: relative;
  z-index: 99;
  grid-column: 1 / span 12;
  grid-row: 1;
  background: pink;
  -ms-grid-column: 1; …

我有两个快速的middlware,其中一个是将对象设置为req,另一个是跟随它使用该对象来转换switch语句.

这是一个例子:

module.exports = (req, res, next) => {
  if (!req.headers.authorization) {
    return res.status(401).end()
  }
  const token = req.headers.authorization.split(' ')[1]
  return jwt.verify(token, config.database.jwtSecret, (err, decoded) => {
    if (err) { return res.status(401).end() }

    const userId = decoded.sub
    return User.findById(userId, (userErr, user) => {
      if (userErr || !user) {
        return res.status(401).end()
      }
      req.user = {
        _id: user._id,
        name: user.name
      }
      return next()
    })
  })
}

    //My route
        userpage.get('/', authCheck, (req, res) => {
          return Event.findOne()
          .populate('attending.user', 'name') 
          .exec((err, newEvent) => { …

我正在用react-redux 实现一个react-bootrap轮播,我在标题中得到了错误.

我正在使用受控转盘,当转盘自动更改幻灯片时会出现错误消息.

当用户点击prev时.下一个按钮并手动更改它们似乎都没问题.

如果我添加持久性作为道具或类似的道具或选项,我不明白吗？

这是我的代码:

容器:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import store from 'store/configureStore'
import Slides from 'components/SlideShow'
import { getInitalSlides, handleSelect } from 'actions/SlidesActions'

class Home extends Component {

constructor(props) {
    super(props)
    this.state = {
        index: null,
        direction: null
    }
    this.handleSelect = this.handleSelect.bind(this)    

static fetchData({ store }) {
        return store.dispatch(getInitalSlides())
    }

    componentDidMount() {
        this.props.getInitalSlides()
    }

handleSelect(selectedIndex, e) {
        //alert(e)
        this.props.handleSelect(selectedIndex, e) …

我正在尝试在调度 redux 操作的自定义挂钩中实现 useDispatch，但出现以下错误：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

代码：

模块文件

import { useDispatch, useSelector } from 'react-redux'

export function useFetchEvents() { …

我从这里获取了受控轮播的示例代码：https : //react-bootstrap.github.io/components.html#media-content

我正在尝试通过我的redux设置在es6中使用它，但是可惜！尽管我竭尽全力，但我仍然收到以下错误消息：

SlideShow.js？d20f：20未捕获的TypeError：无法读取未定义的属性“ direction”

1. 我在以下代码中没有绑定/做错了什么？
2. 我可以在愚蠢的组件中处理这种状态吗？
3. 为什么哦，为什么忘恩负义的英国人离开我们呢？;（（很抱歉）

这是我愚蠢的组件（component / sldeshow.js）：

 import React, { Component, PropTypes } from 'react'
import { List } from 'immutable'
import { Link } from 'react-router'
import { Carousel } from 'react-bootstrap'

class Slides extends Component {

constructor(props) {
    super(props)
    this.state = {
      index: 0,
      direction: null
    }

    // Bind callback methods to make `this` the correct context.
    this.handleSelect = this.handleSelect.bind(this)

  }

  handleSelect(selectedIndex, e) {
    alert('selected=' + selectedIndex + ', direction=' + e.direction) …