Question

我正在使用Redux编写应用程序，并且无法获得Redux connect() ed组件进行渲染。

import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

var store = createStore((s, a) => s, {hello: "WORLD"});

class App extends React.Component {
  render() { return <h1> Hello, world! </h1>; }
}
var connectedApp = connect(function(s) { debugger })(App);

$(document).ready(function() {
  var target = document.getElementById("root");

  // DOES render
  React.render(<App/>, target);

  // Never renders
  React.render(<connectedApp/>, target);
});

该应用正在使用babel，babelify，redux和redux-react。

返回connect（）内部的对象似乎也没有修改组件中的this.props。传递给debugger的{{1}}语句永远不会触发。

这段代码有问题吗？为什么不进行组件渲染？为什么connect语句永远不会触发？

Answer 1

JSX将以大写字母开头的组件类型转换为对该类型的React.createElement调用：

<App/> // => React.createElement(App);

但是，它将以小写字母开头的组件类型转换为DOM节点（通过将其作为字符串而不是引用传递）：

<connectedApp/> // => React.createElement("connectedApp");

事实上，如果您通过浏览器的检查器查看DOM，您可能会看到

<connectedApp data-reactid=".0"></connectedApp>

尝试大写connectedApp：

var ConnectedApp = connect(...)(App);

// ...

React.render(<ConnectedApp/>, target);

Answer 2

您没有将有效的ReactElement传递给第二个渲染方法。

第一个<App/>组件有效，因此将其呈现为DOM节点。

然而，第二个<connectedApp/>不是ReactElement。所以它根本不会被渲染。这只是一个功能。 var connectedApp = connect(function(s) { debugger })(App);

取自API from REDUX connect函数的典型用法如下：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(App)

带有参数：

<强> [mapStateToProps(state, [ownProps]): stateProps] (Function)

App组件订阅了redux商店更新，如果组件更新，则始终调用此函数。该函数的返回应该是一个对象。

<强> [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

作为对象，内部的每个功能都将被识别为有效的动作创建者

您不需要将connect传递给渲染方法，只需将您的App订阅到REDUX商店。

从官方REDUX页面获取，这是您设置订阅的方式：

import { React } from 'react'
import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}

class TodoApp extends React.Component {
  //your App
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)`

Redux静默地不渲染connect（）ed组件

2 个答案: