小编Kok*_*lav的帖子

我有一个Editor看起来像这样的组件:

class EditorComp extends Component {
  focus() {
    this.refs.input.focus();
  }

  render() {
    return (
      <input 
        ref="input"
        ...
      />
    );
  }
}

因此,使用的元素EditorComp可以设置ref并调用其focus方法并将焦点应用于较低级别的输入,如下所示:

class Parent extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.refs.editor.focus()}>Focus</button>
        <EditorComp ref="editor" />
      </div>
    );
  }
}

然而,当包装EditorComp在高阶组件(如react-reduxs connect())中时,EditorComp失去焦点方法,因为它被困在HOC下面.

例:

const WrappedEditor = connect()(EditorComp); // react-redux's connect, for example
const wrappedEditorInstance = <WrappedEditor />;

wrappedEditorInstance.focus() // Error! Focus is not a …

I'm trying to create a multi step registration form using React and Redux.

The main component is as follows :

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actionCreators from '../../actions/actionCreators';
import countries from '../../data/countries';

import RegistrationFormStepOne from './registrationFormStepOne';
import RegistrationFormStepTwo from './registrationFormStepTwo';
import RegistrationFormStepThree from './registrationFormStepThree';
import RegistrationFormStepFour from './registrationFormStepFour';

class RegistrationPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: Object.assign({}, this.props.userData),
            fileNames: {},
            selectedFile: {},
            icons: {
                idCard: …

我正在尝试与一个团队一起构建一个React应用程序，并试图找出创建一个“高阶” React组件（一个包装另一个组件）以与Redux数据存储结合执行身份验证的最佳方法。

到目前为止，我的方法是创建一个模块，该模块由一个函数组成，该函数根据是否有经过身份验证的用户来返回新的React组件。

export default function auth(Component) {

    class Authenticated extends React.Component {

        // conditional logic

        render(){
            const isAuth = this.props.isAuthenticated;

            return (
                <div>
                    {isAuth ? <Component {...this.props} /> : null}
                </div>
            )
        }
    }

    ...

    return connect(mapStateToProps)(Authenticated);

}

这使得我团队中的其他人可以轻松地指定某个组件是否需要某些权限。

render() {
    return auth(<MyComponent />);
}

如果您要执行基于角色的检查，则此方法很有意义，因为您可能只有几个角色。在这种情况下，您可以致电auth(<MyComponent />, admin)。

对于基于权限的检查，传递参数变得笨拙。但是，在构建组件时（以及在团队环境中可管理）在组件级别指定权限可能是可行的。设置静态方法/属性似乎是一个不错的解决方案，但据我所知，es6类导出为函数，但不会显示可调用方法。

有没有办法访问导出的React组件的属性/方法，以便可以从包含的组件中访问它们？

我正在使用React作为一个小型的网络应用程序.它有一个基本的5页网站布局.(主页|关于|联系|按|显示)所以我想使用一个只显示菜单,页眉和页脚的应用程序模板,{props.children}它将是React Router的路径组件.为此,我使用了以下代码.假设所有进口都在那里......

这是我的路由器代码:

export default (props) => {
    return (
        <Router history={ hashHistory }>
            <Route path="/" component={ Template }>
                <IndexRoute component={ Home }></IndexRoute>
                <Route path="about"   component={ About }></Route>
                <Route path="music"   component={ Music }></Route>
                <Route path="store"   component={ Store }></Route>
                <Route path="shows"   component={ Shows }></Route>
                <Route path="contact" component={ Contact }></Route>
            </Route>
        </Router>
    );
}

现在这是我的模板:

export default ( props ) => {
    return (
        <div className="container">
            <Header />
            <Menu />
            { props.children }
            <Footer />
        </div>
    );
}

我知道有些事情是错的,b/c没有CSS魔术,a:主动总是在HOME和任何其他活动页面.如果我点击关于IE,那么Home和About都是活动的.我怎样才能正确使用索引路由,或者我是否应该在这个简单的应用程序中使用索引路由？如果没有,那么我怎样才能使用我所拥有的模板,并以不同的方式将页面作为组件传递？

更新:这是我的Menu.js文件... …

我想在Redux中间件中提取URL参数,以便分派操作并在有效负载中使用这些值.

我正在努力让我的React/Redux应用程序根据操作更新URL.我做了很多环顾四周.我以为我有一个处理它,但显然我错过了一些东西.我还有其他正确响应的减速器.

目前,我只是想记录行动.

路由减速器

const initialState = { locationBeforeTransitions: null };

export default function routing(state = initialState, action)
{
  switch (action.type)
  {
    case 'LOCATION_CHANGE':
      console.log(action)

    default:
      return state

  }

}

商店

/*
  Things from other people
 */

import { createStore, applyMiddleware, compose } from 'redux'
import { syncHistoryWithStore }                  from 'react-router-redux';
import { browserHistory }                        from 'react-router'
import   thunkMiddleware                         from 'redux-thunk'
import   createLogger                            from 'redux-logger'

/*
  Things from us
 */

import { fetchSuitesAndFails, fetchResults } from './actions/actions';
import   rootReducer                         from './reducers/index' …

我从这里获取了受控轮播的示例代码：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) …

几个星期以来,我一直在努力解决这个问题.我终于放弃了并在此寻求帮助,因为我显然没有做正确的事情.我有一个使用redux和redux-thunk的React.js应用程序.我只是试图让我的组件容器启动数据加载,但是在数据从获取请求返回之前不会呈现.我知道这看起来很简单.这就是我所做的:

容器组件

'use strict';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchActivePlayer } from '../actions/index';
import PlayerDetails from '../components/players/player-detail';
import Spinner from '../components/common/spinner/index';
import store from '../store';

export default class PlayerDetailContainer extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.fetchActivePlayer(this.props.params.player_slug)
    }

    render() {
        if (!this.props.activePlayer.activePlayer) {
            return (
                <Spinner text="Loading..." style="fa fa-spinner fa-spin" />
            );
        }

        return (
            <PlayerDetails 
                player={ this.props.activePlayer.activePlayer } 
            />
        );
    }
}

function mapStateToProps(state) {
    return { …

我在写代码，notification_actions.js就像：

# notification_actions.js
export const NOTIFICATIONS_RECEIVED = 'NOTIFICATIONS_RECEIVED';
export const notificationsReceived = (notifications, unreadCount) => ({
  type: NOTIFICATIONS_RECEIVED,
  notifications,
  unreadCount,
});

（请参阅整个文件）

然后将其捆绑成all_actions.js：

# all_actions.js
export * from 'navigation_actions';
export * from 'filter_type_actions';
export * from 'notification_actions';

最后将其notifications_model.js用作：

import {
  notificationsReceived,
} from './all_actions.js';

...

const handleData = (dispatch) => ({ notifications, unreadCount }) => {
  dispatch(notificationsReceived(notifications, unreadCount));
};

但是我明白了TypeError: notificationsReceived is undefined！

不确定如何进一步调试。

我的webpack.config.js：在这里

我的部门package.json：

"autobind-decorator": …

所以我注释掉了它给我回溯的地方。

export function* watchFileReader(){
const action = yield take("DROP_FILE")
console.log('action', action)
let file = action.file[0];
readFile(file, function(e){
  sessionStorage.removeItem('img')
  console.log('alskdjfalsdjkf', e.target.result)
  sessionStorage.setItem('img', e.target.result)
  // yield put({type: "UDATE", {img: e.target.result})
   })
}

更新：这是我承诺的使代码起作用的功能。

 function readFileWithPromise(file){
  return new Promise((resolve, reject) => {
   readFile(file, function(e){
     if (e){
      resolve(e)
     }else{
      reject(e)
     }
   })
 })
}

我最近开始学习React/Redux,现在我正在尝试构建一个小的单页面应用程序.

最近我遇到了一个我不理解但无法修复的问题.

我来告诉你代码:

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import App from './components/App'
import Home from './components/Home'
import About from './components/About'

const reducer = (state = {}, action) => {
  return state
}

const store = createStore(
  combineReducers({
    reducer,
    routing: routerReducer
  })
)

const history = syncHistoryWithStore(hashHistory, store) …

我正在研究中型的React / Redux项目，并且正在尝试找出React / Redux的最佳实践。

例如，如果我有一个饼图组件，它将使用一个简单数组作为prop：

[{
  label: 'a',
  value: 10
}, {
  label: 'b',
  value: 6
}, ...]

但是我从API服务器获取的源数据可能是这样的：

{
  a: {
    value1: 15,
    value2: 3,
    value3: 7,
    ...
  },
  b: { ... }
}

现在我必须做一些计算，得到的结果数据（如值1 -value2 +值3 ...也许一些过滤器...），问题是，我应该把这个计算在减速（我觉得它更像是吸，将其作为道具通过传递给组件connect（如getCartProducts 本例中所示）或容器组件（在这种情况下可能是仪表板）？

我认为两种选择都有意义：

• 在reducer中：我们可以保持组件清洁，并将所有逻辑放在同一位置。

• 在容器中：因为它与UI相关，并且如果计算的数据不可重用（仅适用于该饼图），我们可以将这种计算保留在相关的组件中。

如果我选择减速机，则会出现另一个问题。我应该将计算的数据保存在存储中吗？或者只是保存源数据，并在每次渲染组件时进行计算？旧的React文档说您不应该将计算的数据保存在状态中，不确定Redux是否为true。

我正在尝试编写一个书签来自动填充表单,以简化手动测试.该网站在React中实施.我尝试过使用JQuery,例如:

$("#emailAddress").val("bob@example.com").changed()

虽然该input字段在浏览器中明显更新,但看起来该字段未被识别为已更改,因为表单提交时验证失败,表示数据丢失.

有没有一种可行的方法来使用ad-hoc JS自动填充React表单字段,而不更改任何源代码？

(注意:我理解这种直接操作不是在一般应用程序开发中使用React的正确方法.在这里,我正在寻找任何解决方案,无论多么简单,都要简化特殊的手动测试).