Question

以下两个调度程序都不会出现在子级的props对象中（this.props仅显示我传入的“ Hi”字符串）。

如果我只是在App.js父组件中使用它们（如this.props.<dispatcher()>，它们就可以工作。

    // App.js
import React, { Component } from 'react';
import './App.css';

import SelectDonation from './components/SelectDonation';

import {connect} from "react-redux";

import './semantic/dist/semantic.min.css';
import {Modal, Header, Button, Form} from "semantic-ui-react";

import Redux            from "redux";
import ReactRedux       from "react-redux";
import {log_to_console_function, set_donation_amount} from "./actions";
import store from "./reducer";


render() {
  return (
    <div className="App">    
        <SelectDonation ap="Hi"/>
    </div>
  );
}


// App.js outside render()
const map_dispatch_to_props = (dispatch) => {
  return {
    dispatch_log_to_console_function: () => dispatch(log_to_console_function()),
    dispatch_set_donation_amount : (amount) => dispatch(set_donation_amount(amount))
  }
};

export const AppWrapped = connect(map_state_to_props, map_dispatch_to_props)(App);

任何想法可能是什么问题？我的第一个念头是想念一个进口商品，但我看不到任何遗漏的东西。

这是子组件

// SelectDonation.js (Child component)
import React from "react";
import {css} from "emotion";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";
export default (props) => {

  const save_donation_amount = (e) => {
    props.dispatch_log_to_console_function();
    props.dispatch_set_donation_amount(e.target.value);
    console.log(store.getState().donation_amount);
  };

  return (
    <React.Fragment>
      {console.log(props)}
      {console.log(props.ap)}
      <Button
         primary
         onClick={(e) => save_donation_amount(e)}>Next Step
      </Button>
    </React.Fragment>
  )
}

Answer 1

您的子组件SelectDonation需要从App或Redux显式接收调度功能，才能使用这些功能。实际上，情况并非如此。您可以像传递“ Hi”一样传递这些函数，也可以将SelectDonation连接到Redux。

我不推荐任何一种方法。我建议您的SelectDonation组件在按下按钮时通知其父组件，并且父组件将与Redux对话。请查看官方文档以获取有关此方法的教程：https://reactjs.org/docs/lifting-state-up.html

Redux调度程序无法作为道具传递给子组件

1 个答案: