javascript - 在 ReactJS 中如何将值从一个组件传递到另一个组件

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 映射到 Prop ，如下所示:

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

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

这能解决您的问题吗？