Reactjs MapsStateTops未在另一个组件内的组件中调用

示例后的输出缺少“Hello world”。。。 然后，在应用程序组件的呈现中添加了一个组件，MapStateTops将为应用程序组件而不是示例组件调用

为什么在组件中使用MapStateTops时不调用它

---

代码示例旨在理解redux/react的概念。

您只需通过替换

import * as React from 'react';
import { connect } from "react-redux";
import './App.css';
import logo from './logo.svg';
import { Sample } from './Sample';

export interface IAppProps {
  sap:any
}

class App extends React.Component<IAppProps> {
  constructor(props: IAppProps) {
    super(props);
  }

  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
        {this.props.sap}
        <Sample />
      </div>
    );
  }
}

export function mapStateToProps(state: any, ownProps: any) {
  return {
    sap:"THIS FROM APP"
  }
}

export default connect(mapStateToProps)(App);


import * as React from 'react';
import { connect } from "react-redux";
import './App.css';

export interface ISampleProps {
    newData?: any
}

export class Sample extends React.Component<ISampleProps> {
    constructor(props: ISampleProps) {
        super(props);
    }

    public render(): any {
        return (
            <div className="App">
                SAMPLe.....
                {this.props.newData}
            </div>
        );
    }
}

export function mapStateToProps(state: any, ownProps: any) {
    return {
        newData: "Hello world"
    }
}

export default connect(mapStateToProps)(Sample);

与

当您使用大括号时，表示它是导出之一， 如果不指定大括号，则它将成为所引用的默认导出

---

默认导出是在您的情况下连接到redux的组件

示例类的导出不正确。导入周围的括号不是示例组件的默认导出，因此，

this.props.newData

为空。在上课之前删除关键字

export

，并删除导入中的括号。

import { Sample } from './Sample';

import Sample  from './Sample';