Question

请帮忙。

this.props.store 不适用于子组件。

但是connect（mapStateToProps，mapDispatchToProps）......工作正常。

为什么不能只使用子组件？

1。父代码（工作正常）

import React from 'react';
import ReactDOM from 'react-dom';
import { Home } from './container/home/index';
import { ChildrenComponent } from './container/childrenComponent';
import { Match, Miss } from 'react-router';
import { BrowserRouter as Router } from 'react-router';

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import Reducers from './reducers';

const store = createStore(Reducers);
store.subscribe(() => console.log('ㅡㅡㅡㅡㅡ store was updated ㅡㅡㅡㅡㅡ'));
store.subscribe(() => console.log(store.getState()));
store.subscribe(() => console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ'));

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <Match pattern="/" component={Home} />
        <Match pattern="/ChildrenComponent" component={ChildrenComponent} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root')
);

2。儿童组件（不仅仅是'this.props.store .....'）

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

class ChildrenComponent extends Component {
  constructor (props) {
    super (props);
  }
  render (
    console.log(this.props.store) // undfined
    console.log(this.props.store.getState()) // does not working

    const mapStateToProps = (state) => {
      return {
        // .... is working fine
      }
    }
    const mapDispatchToProps = (dispatch) => {
      return {
       // .... is working fine
      }
    }
  )
  return (
    <divHellow world</div>
  )
}

expoert default connect(mapStateToProps, mapDispatchToProps)(ChildrenComponent);

Answer 1

尝试直接访问商店及其状态会破坏使用Redux，特别是React-Redux的全部目的。您应该使用mapStateToProps来访问每个特定组件中所需的state部分。

Answer 2

将mapStateToProps和mapDispatchToProps放在组件类之外，并将jsx放在组件类的render方法中。

<script type="text/javascript">
$(document).ready(function(){
$("#country").one("finishedLoading", function () {
      setTimeout(function () {$("#state").val("<?= (filter_input(INPUT_POST,"state")?:"[]") ?>").trigger("change")},10);
});
 $("#state").one("finishedLoadingState", function () {
      setTimeout(function () { $("#city").val("<?= (filter_input(INPUT_POST,"city")?:"[]") ?>").trigger("change") }, 10);
});

$('#country').on('change',function(){
    var countryID = $(this).val();
    if(countryID){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'country_id='+countryID,
            success:function(html){
                $('#state').html(html);
                $('#city').html('<option value="">Select state first</option>'); 
                $("#country").trigger("finishedLoading"); //Little custom event we can listen for
            }
        }); 
    }else{
        $('#state').html('<option value="">Select country first</option>');
        $('#city').html('<option value="">Select state first</option>'); 
        $("#country").trigget("finishedLoading");
    }
}).trigger("change"); //Trigger immediately in case there's a value pre-selected 
$('#state').on('change',function(){
    var stateID = $(this).val();
    if(stateID){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'state_id='+stateID,
            success:function(html){
                $('#city').html(html);
                $("#state").trigger("finishedLoadingState");
            }
        }); 
    }else{
        $('#city').html('<option value="">Select state first</option>'); 
        $("#state").trigger("finishedLoadingState");
    }
});

Props.store不适用于子组件

2 个答案: