终极版 - 我想呈现在handleClick SimpleModal组件，我怎么能实现它通过终极版

Question

我想呈现handleClick SimpleModal组件，我怎么能实现它通过终极版

我能做到这样？ //ReactDOM.render（，document.getElementById（“123”））;

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom' 
import Redux,{createStore,combineReducers } from 'redux'; 
import SimpleModal from './modal.js'; 
import {Provider, connect} from 'react-redux'; 

import {displayItems} from './reducers.js'; 

const ecommerceAppReducer = require('./reducers.js').default; 

const store = createStore(ecommerceAppReducer); 

常量EcommerceApp = React.createClass（{

componentDidMount(){ 

store.dispatch({ 
      type: 'LIST_DATA', 
      id: 12 
     }); 
}, 



handleClick: function(entity){  
this.props.dispatch({ 
     type: 'DISPLAY_INFORMATION', 
     entity:entity 

    }); 

**Want to render a SimpleModal here** 

}, 

    render() { 

    return (

    <div> 

     <ul>{ 
       this.props.state.displayItems.map(function(e) {   
      return <li><a onClick={this.handleClick.bind(this,e) }>{e.name}</a></li> 
      }.bind(this)) 
     } 
     </ul> 
    </div> 

    ); 
    } 
}); 

const mapStateToProps = function (state) { 
    return {state}; 
} 

const Eapp = connect(mapStateToProps)(EcommerceApp); 

class App extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <Eapp /> 
     </Provider> 
    ) 
    } 

} 

ReactDOM.render(<App />, document.getElementById('root')); 

Answer 1

在反应，渲染函数应该退回的应用是什么样子目前，作为现在。阵营将采取更新和渲染的护理等等，只要你使用其中一种方法来通知React，当它需要放弃某些东西时

一种方法是在应用程序的根目录下调用React.render。这是最糟糕的方式，但对于小型应用程序来说并不可怕只有在你知道的情况下才推荐你在做什么，甚至可能有更好的方法。

接下来是在您的组件中使用setState()。 React将在某个时间后调用该特定组件的render方法。更精确的是，并非您的整个应用程序都会重新渲染（尽管您可以通过明智地实施shouldComponentUpdate来停止渲染级联）。

接下来要打电话给forceUpdate，除非您真的确定自己是干什么的，否则这很糟糕。 React-Redux使用它，因为他们知道他们正在进入什么。

最后，还有React-Redux，这不是React渲染组件的另一种方法。但它是开发人员的一种新方式。这是迄今为止推荐的做事方式。

要使用它，您只需按照connect规定的方法将您的Redux状态转换为组件的道具。

这需要阅读Redux文档。这是一个漫长而艰苦的过程，可以保证让任何人成为更好的开发者。

在您的mapStateToProps实现中，对于传递给组件的状态的哪些部分非常重要。

不要只是去传递整个Redux状态。如果您的应用程序中的任何地方发生任何变化，这会导致您的整个应用程序重新渲染。不是最佳。只通过你所需要的。甚至不要传递子组件需要的东西。他们得到了自己的connect。

现在，我们走了。

你想​​弹出一些东西，并显示给用户。方法1：使用alert。这很丑很超级简单。它提供了糟糕的用户体验，因此不推荐。

方法2：使用React-Redux。 dispatch这个动作会导致您的缩减器将某些数据置于允许您的应用知道显示数据的状态。看起来你已经这么做了！

Redux会通知React-Redux发生了一些变化。

React-Redux将检查您的任何组件是否使用刚刚更改的状态中的信息。它知道你使用什么，因为这是你从mapStateToProps函数返回的内容。

React-Redux会告诉React重新发现它发现需要更新的任何组件。

当你的组件的render方法被调用时，你会得到props中的新信息。所以呢：

render() { 
    return (
    <div> 
     {Boolean(this.props.modalOpen) && <MyConnectedModal />} 
     <ul>{ 
     this.props.displayItems.map(function(e) {   
      return <li key={e.name}><a onClick={this.handleClick.bind(this, e) }>{e.name}</a></li> 
      }.bind(this)) 
     } 
     </ul> 
    </div> 
    ); 
} 

上面的代码还有很多错误。你应该，例如，never bind in render。

请注意，模态是一个组件。它从React-Redux获取数据，而不是从父级传递的道具。这意味着如果显示的数据发生变化，您的EcommerceApp组件不必负责更新模式。 Redux会照顾到这一点。其实与React-Redux的帮助当然。和自然反应。不一定按这个顺序。

要回顾一下是怎么回事：你render方法告诉阵营不什么流行起来，但什么最终结果应该像。这是一个巨大的差异和几乎the entire point of React。

你从不告诉React什么改变了。你总是告诉它最终结果应该是什么样子。然后，React将明白发生了什么，并会找到一种有效的方式将其显示在浏览器窗口或电子或nw.js桌面应用程序或原生移动应用程序或其他任何地方React worx。