子から親にデータを渡すReactフック

Question

私はフックに反応するのは初めてです（私は言うべきです：まだそれらから始まっていません）、この小さな問題の支援が必要です。このコンポーネントは星をレンダリングし、ユーザーが評価を選択できるようにします。このコンポーネントから親コンポーネントに{starSelected}値を渡したいのですが。

import React, { useState } from "react";
import "./styles.css";

const Star = ({ selected = false, onClick = f => f }) => (
  <div className={selected ? "star selected" : "star"} onClick={onClick} />
);

const StarRating = ({ totalStars }) => {
  const [starsSelected, selectStar] = useState(0);
  return (
    <div className="star-rating">
      {[...Array(totalStars)].map((n, i) => (
        <Star
          key={i}
          selected={i < starsSelected}
          onClick={() => selectStar(i + 1)}
        />
      ))}
      <p>
        {starsSelected} of {totalStars} stars
      </p>
    </div>
  );
};

私はどんな助けにも感謝します!!!

親コンポーネント

class RatingNFeedback extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {},
            modal: false,
            ratings: '',
            feedback: '',
            feedbackTitle: '',
            errors: {}
        };
        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState(prevState => ({
            modal: !prevState.modal,
            ratings: '',
            feedback: '',
            feedbackTitle: ''
        }));
    }

    handleRating = (assetId, accessToken) => {
        const {rating, feedback, feedbackTitle} = this.state;
        const ratings = {
            rating,
            feedbackTitle,
            feedback,
            asset: assetId
        };
        this.props.addRatingNComment(ratings, accessToken);
        this.toggle();
    };

    onChange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    isModalOpen() {
        return this.state.modal;
    }

    render() {
        const {ratingCount, commentCount, assetId, accessToken} = this.props;
        let stars = [];
        //loop 5 times for stars
        for (let i = 1; i <= 5; i++) {
            let path = require('../../assets/rateFull.svg');
            if (i > ratingCount) {
                path = require('../../assets/RateZero.svg');
            }
            stars.Push(<img src={path} alt="" className="card-category-rating" />);
        }
        let userpic = defaultPic;
        if (this.props.user) {
            userpic =
                'http://people.com/User%20Photos/Profile%20Pictures/' +
                this.props.user.profile +
                '_LThumb.jpg';
        }

        return (
            <React.Fragment>

                <Modal
                    isOpen={this.isModalOpen()}
                    toggle={this.toggle}
                    //style={{height: '500px', width: '500px'}}
                    centered
                    className="modal"
                    animation="true"
                >
                    <ModalHeader toggle={this.toggle} className="modal-header">
                        <span className="modal-title"> How would you rate this report? </span>
                    </ModalHeader>
                    <ModalBody className="modal-body ">
                        <div className="rating-modal-header">
                            {' '}
                            <div className=" image-name-box">
                                <div className="circular-landscape image-box">
                                    <img src={userpic} alt="Employee Image" className="user-profile" />{' '}
                                </div>
                                <div className="name-box">
                                    {' '}
                                    <p className="normal-text-2">
                                        {' '}
                                        {`${this.props.userName} ${this.props.familyName}`}{' '}
                                    </p>{' '}
                                    <p className="small-text-2 "> Your review will be posted on Our Website.</p>
                                </div>
                            </div>{' '}
                        </div>
                        <div className="heading3">Your Ratings</div>

                        <StarRating totalStars={5} />

                        <FormTextInput
                            label="Your Feedback:"
                            name="feedbackTitle"
                            value={this.state.feedbackTitle}
                            onChange={this.onChange}
                            placeholder="Title goes here..."
                            type="text"
                        />
                        <FormTextInput
                            //label="Your Feedback:"
                            name="feedback"
                            value={this.state.feedback}
                            onChange={this.onChange}
                            placeholder="Write your feedback here..."
                            type="textarea"
                        />
                    </ModalBody>
                    <ModalFooter>
                        <Button
                            color="primary"
                            onClick={() => this.handleRating(this.props.assetId, this.props.accessToken)}
                        >
                            Submit
                        </Button>{' '}
                        <Button color="secondary" onClick={this.toggle}>
                            Cancel
                        </Button>
                    </ModalFooter>
                </Modal>
            </React.Fragment>
        );
    }
}

Answer 1

親コンポーネントに小道具を渡すことはできません。

外部状態を使用する必要があります Reduxと呼ばれます

これはHOCコンポーネントであり、他のすべてのコンポーネントの上にあります。

ドキュメントを読むためにいくつかのパラセタモールが必要な場合があります...