时间戳

首页 > 解决方案 > 如何将不同的功能作为道具传递给同一个组件？

reactjs - 如何将不同的功能作为道具传递给同一个组件？

问题描述

“我正在尝试在我的反应应用程序中添加评论功能，我想根据我的用户类型调用不同的功能”

“我已经成功地应用了这个逻辑，而且我可以发表评论并保存它。”

这是我的 CommentForm.js 代码

import React, { useState, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addComment } from '../../actions/userdata';

const CommentForm = ({ userdataId, addComment }) => {
  const [text, setText] = useState('');

  return (
    <Fragment>
      {/* <div className='bg-primary p'>
        <h3>Leave a Comment</h3>
      </div> */}
      <form
        className='form my-1'
        onSubmit={e => {
          e.preventDefault();
          addComment(userdataId, { text });
          setText('');
        }}
      >
        <textarea
          name='text'
          cols='3'
          rows='3'
          placeholder='Any Other Comments..'
          value={text}
          onChange={e => setText(e.target.value)}
          required
        />
        <input type='submit' className='btn btn-dark my-1' value='Submit' />
        <small> {'<==='} Press this button to save Comments</small>
      </form>
    </Fragment>
  );
};

CommentForm.propTypes = {
  addComment: PropTypes.func.isRequired
};

export default connect(
  null,
  { addComment }
)(CommentForm);

我在其他文件中使用它作为

<CommentForm userdataId={userdata._id}/>

问题是我在 ..

因此我必须创建 9 个文件。我已经试过了

<CommentForm userdataId={userdata._id} addComment={addCommenti}/>

但它不起作用，即它正在调用 addComment 而不是 addComenti 。关于如何进行的任何想法？

这是我的 addComment 函数

//Add Comment
export const addComment = (userdataId, formData) => async dispatch => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  try {
    const res = await axios.post(
      `/api/userdata/comment/${userdataId}`,
      formData,
      config
    );

    dispatch({
      type: ADD_COMMENT,
      payload: res.data
    });

    dispatch(setAlert('Comment Added', 'success'));
  } catch (err) {
    dispatch({
      type: USERDATA_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

标签： reactjsreact-redux

解决方案

所以有两件事：

如果您需要在组件中使用 9 个函数，即使每个用户类型只需要一个函数，我也会传递所有 9 个函数并处理在那里使用的逻辑。

在这种情况下，您只想像以前一样添加剩余的功能。

如果您确实想覆盖使用 redux 注入的操作，以便您可以决定在父组件中传递哪个函数，您可以使用 mapDispatchToProp 的功能版本来实现；它有第二个参数 ownProps 你可以使用：

const mapDispatchToProps = (dispatch, ownProps) => ({
  addComment: (text, userdataid) => dispatch(addComment(userdataid, { text }),
  ...ownProps,
});

因为我在声明 addComment后传播了 ownProps ，所以你可以从父级传递 addComment，它将替换我们上面声明的那个。

推荐阅读