ReactJs中如何传入函数？

Question

我正在使用 redux 模式，但我不确定是否只是将我的 1+ 个操作方法传递给了一个哑组件。

现在在我的智能组件中我有类似

的东西

<AddStorageItemButton {...this.props} />

但是这门课程传递了所有内容，我不想要那样。

我想要类似的东西

<AddStorageItemButton test={()=>this.showAddStorageItemModal(this)} />

然后在我尝试做的组件中

 <a href="#"onClick={() => this.props.test(true) }> Add</a>

这是我的功能。

export function showAddStorageItemModal(show) {
    return function (dispatch) {
        dispatch({ type: actions.SHOW_ADD_STORAGE_ITEM_MODAL, payload: show });
    };
}

编辑这里更多的是我的结构

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import 'materialize-css/sass/materialize.scss';
import '../styles/main.scss';


import AddStorageItemButton from './AddStorageItemButton.js';

import { showAddStorageItemModal } from '../actions/StorageItemActions.js';

class App extends React.Component {
  render() {
    return (
      <div>
          <AddStorageItemButton {...this.props} test={this.props.showAddStorageItemModal(this)} />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    // reducers
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    showAddStorageItemModal: showAddStorageItemModal,
  }, dispatch);
}


export default connect(mapStateToProps, matchDispatchToProps)(App);

Answer 1

由于 showAddStorageItemModal 是 return 闭包，我想你要做的是传递该函数的 return 值 作为道具：

<AddStorageItemButton test={this.showAddStorageItemModal(this)} />

这样当您单击时，dispatch 将被调用

Answer 2

//我希望你在构造函数

中将showAddStorageItemModal绑定到this

<AddStorageItemButton test={this.showAddStorageItemModal} />




 <a href="#"onClick={() => this.props.test(true)() }> Add</a>

ReactJs中如何传入函数？

How to Pass in Functions in ReactJs?

javascript

reactjs

react-redux