mapsStatetoProps не вызывается в компоненте внутри другого компонента - PullRequest
Новая
       11

mapsStatetoProps не вызывается в компоненте внутри другого компонента

0 голосов
/ 04 июля 2018 
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);

вывод отсутствует "Hello world" после SAMPle ... enter image description here Затем в компонент рендеринга компонента App добавляется компонент, который вызывается mapStateToProps для компонента App, но не для компонента Sample.

Почему mapStateToProps не вызывается при использовании в компоненте?

Пример кода - понять концепцию редукса / реакции.

1 Ответ

0 голосов
/ 04 июля 2018

Вы можете просто исправить свой код, заменив 

import { Sample } from './Sample';

с 

import Sample  from './Sample';

когда вы используете фигурные скобки, вы указываете, что это один из экспорта, когда вы не указываете скобки, это экспорт по умолчанию, на который вы ссылаетесь

экспорт по умолчанию - это компонент, который в вашем случае связан с redux

...