Question

我有一个名为questions的模型，它有一个属性senderID，id，expID，description。我想要做的是，一旦用户点击列表中的任何问题，点击的问题的senderID 就会传递给另一个名为AnswerTemplate的组件。我怎么能这样做

这是渲染方法

` render() {

        const { id: accountID } = this.props.account;
        const question = this.state.questions.filter(({ expID }) => expID === accountID);
        return (
          <div>
            <h1>Answer the questions here!</h1>
            <ul>
              { question.map(({ id, description, senderID }) => (
                <li key={ id }>
                  <a href ={ '/temp' }>{description}</a>
                </li>
              ))}
            </ul>
          </div>
        );
      }
    }`

这是完整的代码：

import React, { Component } from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AccountActions from '../../../../../Redux/AccountRedux';

class AnswerQuestions extends Component {
  constructor() {
    super();
    this.state = {
      questions: []
    };
  }
  componentWillMount() {
    this.getQuestions();
  }
  getQuestions() {
    axios.get('http://localhost:3001/api/questions')
      .then(response => {
        this.setState({ questions: response.data }, () => {
          console.log(this.state);
        });
      });
  }
  render() {
    const { id: accountID } = this.props.account;
    const question = this.state.questions.filter(({ expID }) => expID === accountID);
    return (
      <div>
        <h1>Answer the questions here!</h1>
        <ul>
          { question.map(({ id, description, senderID }) => (
            <li key={ id }>
              <a href ={ '/temp' }>{description}</a>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
const mapStateToProps = store => {
  return {
    account: store.account.data,
    fetching: store.account.fetching
  };
};
const mapDispatchToProps = dispatch => {
  return {
    get: () => dispatch(AccountActions.accountGet())
  };
};
AnswerQuestions.propTypes = {
  get: PropTypes.func,
  fetching: PropTypes.bool,
  account: PropTypes.object,
  question: PropTypes.object
};
export default connect(mapStateToProps, mapDispatchToProps)(AnswerQuestions);

Answer 1

你对Redux有多熟悉？

由于你使用的是React和Redux，你可以调用一个动作 setQuestionID（_id），例如，

并使用Reducer将此ID存储在全局状态。

然后你连接你的AnswerTemplate.js组件，将问题id映射到道具，如下所示：

const mapStateToProps = store => {
  return {
     question_id: store.question.id,
  };
};

基本上，您将问题ID存储在全局状态。

这会解决您的问题吗？

Answer 2

您可能希望处理与React Router等路由器的链接。

如果您从AnswerQuestions中调用组件，则可以执行以下操作：

<AnswerTemplate somethingToPass={passThis}/>

在AnswerTemplate组件中，您可以使用this.props.somethingToPass。

希望有所帮助。

---评论后编辑---

如果您有两个类的父组件，例如AnswerParent你需要使用AnswerParent的状态来处理数据。例如：

class AnswerParent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            senderID = '';
        }
    }

    render() {
        return (
        <AnswerQuestions onClick={(senderID) => this.setState(senderID)} />
        <AnswerTemplate senderID={this.state.senderID} />
        )
    }

}

然后在AnswerQuestions里面

<li key={ id }>
     <a onClick={() => this.props.onClick(senderID)} href ={ '/temp' }>{description}</a>
</li>

如何将组件中的值传递给ReactJS中的另一个组件

2 个答案: