reactjs - Redux 默默地不渲染 connect()ed 组件

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 。传递给 connect 的 debugger 语句永远不会触发。

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

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);