两个例子,来自类似JS Bin的代码编辑器应用程序：

>用户将其代码导出到GitHub要点.导出完成后,我们要打开一个显示要点的新浏览器窗口.因此,React组件层次结构需要知道要点的ID,但只能在单个时刻知道,此时它将打开窗口并完全停止关注gist导出.
>用户单击错误消息,这会导致编辑器将发生错误的行置于编辑器中.同样,UI只关心需要在一个时刻关注哪一行,此时(非基于React的)编辑器被告知要关注该行,并且整个事情都被遗忘了.

我提出的最不令人满意的解决方案是：

>发生触发事件时,调度操作以使用所需信息更新Redux状态(gist ID,要关注的行)
>对该信息感兴趣的React组件将监视生命周期钩子(componentwillReceiveProps等)中的相应props.当信息出现在其道具中时,它会采取适当的操作(加载要点窗口,将编辑器聚焦在线上)
>然后组件立即向Redux商店发送另一个事件,主要是说“我已经处理了这个”.瞬态事件数据从Redux状态中删除.

对于这种情况,有没有更好的模式？我认为图片中可能的一个基本部分是UI对动作的响应总是突破React组件结构 – 打开一个新窗口,在编辑器的API上调用一个方法,等等.

例如,对于导出情况,不是调度更新某个状态的操作,然后触发新窗口打开,为什么不打开新窗口代替调度该操作呢？如果你有分配动作触发打开窗口所需的信息,你应该能够在同一个地方打开窗口.

对于单击错误消息触发调用非React,命令式api的示例,从错误消息的最近公共父级和编辑器传递函数.父级还可以维护编辑器周围的包装器的引用.即使它有多个级别,如果你是pass down a function to set the ref,那么获得你想要的内容并不是太糟糕.因此,从父代传递到错误消息组件的函数可以简单地调用它维护到编辑器的ref上的方法. .基本上,这样的事情：

class Parent extends Component {
    constructor(...args) {
        super(...args)

        this.onErrorMessageClick = this.onErrorMessageClick.bind(this)
    }

    onErrorMessageClick(lineNumber) {
        if (this.editor) {
            this.editor.focusOnLine(lineNumber)
        }
    }

    render() {
        return (
            <div>
                <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 1 } />
                <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 2 } />
                <EditorWrapper editorRef={ (editor) => { this.editor = editor } } />
            </div>
        )
    }
}

const ErrorMessage = ({ onClick,lineNumber }) => (
    <button onClick={ () => onClick(lineNumber) }>
        { `Error Message For ${lineNumber}` }
    </button>
)

// Just adding EditorWrapper because your editor and error messages probably aren't right next to each other
const EditorWrapper = ({ editorRef }) => <Editor ref={ editorRef } />

class Editor extends Component {
    focusOnLine(lineNumber) {
        // Tell editor to focus on the lineNumber
    }

    render() {
        ...
    }
}

问题

运行我的jests测试会出现以下错误

● Test suite Failed to run

    Cannot find module 'react/lib/React' from 'ReactShalloWrenderer.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:191:17)
      at Object.<anonymous> (node_modules/react-test-renderer/lib/shallow/ReactShalloWrenderer.js:16:13)

我是如何升级的

第1步：yarn.lock

在rebase期间,使用React v16进入分支 – 我在我的yarn.lock文件上放了yarn 1.1.0 take care of merge conflicts

第2步：添加适配器

我添加了新的适配器setupTestFramework.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

第3步：升级包

并升级了以下套餐：

react "16.0.0",enzyme "3.1.0",jest "21.2.1",babel-jest "21.2.0",

谁能看到我错过的任何东西？

Footer.propTypes = {
  completedCount: PropTypes.number.isrequired,activeCount: PropTypes.number.isrequired,filter: PropTypes.string.isrequired,onClearCompleted: PropTypes.func.isrequired,onShow: PropTypes.func.isrequired
}

那么PropTypes到底在做什么呢？他们是不是很好或必须拥有？

谢谢

如果您只是在JS中学习类型,我建议使用flowtypes,在构建时而不是运行时工作.这在编辑器中有效！编辑器扩展还使用强推理来在不太明显的类型缺失,null或不同类型时提醒您.主要好处是它可以加速开发并减少错误,而不会减慢运行时间.您可以在生产前轻松剥离js的流量.

FlowType：https://flowtype.org/docs/getting-started.html#_

如果你想要更强大和更有特色的设置,我建议使用TypeScript来学习JS中的类型.

TypeScript：https://github.com/Microsoft/TypeScript

为了回答你的问题,proptypes从来都不是必须的,并且在某一点上被认为是实验性的.我喜欢它们,但是flowtype更实用恕我直言.主要用途是通过在开发早期发出警告来防止滥用组件,并提供编码文档以便更好地理解(后代).

编辑：我也想明确,proptypes也可以剥离生产.

解决方法

Syntax error: Unexpected token (9:0)

   7 | import ''./App.css'';
   8 |
>  9 | @connect((store) => {
     | ^
  10 |   return {
  11 |     user: store.user.user
  12 |   }

import React,{ Component } from ''react'';
import { connect } from ''react-redux'';

import Todos from ''./components/Todos'';
import Todo from ''./components/Todo'';

import ''./App.css'';

@connect((store) => {
  return {
    user: store.user.user
  }
})
class App extends Component {
  constructor(){
    super()
    this.state = {
      name: ''Brad'',todos: [
        {
          id: ''001'',name: ''Take out trash'',completed: false
        },{
          id: ''002'',name: ''Meeting with boss'',{
          id: ''003'',name: ''Go out to dinner'',completed: false
        }
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <h1>Hello</h1>
        <Todos name={this.state.name} todos={this.state.todos}/>
        <Todo/>
      </div>
    );
  }
}

export default App;

{
  "name": "react-redux-project","version": "0.1.0","private": true,"dependencies": {
    "axios": "^0.16.2","react": "^15.6.1","react-dom": "^15.6.1","react-redux": "^5.0.6","redux": "^3.7.2","redux-logger": "^3.0.6","redux-promise-middleware": "^4.3.0","redux-thunk": "^2.2.0"
  },"devDependencies": {
    "babel": "^6.23.0","babel-plugin-transform-decorators-legacy": "^1.3.4","react-scripts": "1.0.11"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"
  }
}

解决方法

const stateMap = (state) => {
    console.log(''state'',state);
    return {
        //something from state
    };
};

export default connect(stateMap)(App);