小编Amr*_*bib的帖子

1- Provider

为什么我们需要将所有组件包装在里面Provider？

2- connect:

如何connect通过redux存储props组件？

3-我们可以建立我们自己的Provider和connect？

下面是刚刚从Redux的商店显示的名称,并使用阵营终极版全工作简单阵营终极版例子connect和Provider,所以怎么ConnectedComponent能简单地访问this.props.name？

import React, { Component } from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";

var defaultState = {
  name: "Amr"
};

function rootReducer(state = defaultState, action) {
  return state;
}

var store = createStore(rootReducer);


class ConnectedComp extends Component {
  render() { …

我有一个react组件,它使用单独的OnClick呈现一个列表项.

为了找出单击了哪个项,处理程序接受一个参数.处理程序确实被调用 - 但无论单击哪个项目 - 控制台始终记录item3(就像单击item3一样).我在这做错了什么？

class Item {
    constructor(props) {
        super(props);
        this.onItemClickHandler = this.onItemClickHandler.bind(this)
    }

    onItemClickHandler (itemName) {
        console.log("Clicked " + itemName)
    }

    render() {
        this.items = ["item1", "item2", "item3"]
        var lis = []
        for (var liName in this.items) {
            var liName2 = this.items[liName]
            console.log("Adding " + this.items[liName])
            lis.push(<li className="item-ListItem" key={this.items[liName]} onClick={() => this.onItemClickHandler(this.items[liName])}><span><a href="#">{this.items[liName]}</a></span></li>)
        }

        return (
          <div className="item">
            <label className="item-Header"><u>items</u></label>
            <ul className="item-List"> 
            {lis}
            </ul>

          </div>
        );
    }

这一行:

onClick={() => this.onItemClickHandler(this.items[liName])}>

似乎是正确的.