reactjs - 在父组件中，有什么方法可以从子组件访问 Prop ？

Question

我在构建 React 项目时经常遇到一个问题——我需要组件中的 prop，但无法访问它，因为它违反了 props 的单向流。

这是我现在遇到的具体问题:在我的 CafeReviews.jsx组件，我需要访问一段数据 averageRating - 但是，此属性包含在子组件中 Review.jsx .
所以我需要在 CafeReviews 内访问这些数据，这样我就可以将它作为 Prop 传递给 <CafeHeader/> .

关于如何解决这个问题而无需重组我的组件的任何想法？

这是父组件CafeReviews.jsx

import React,{useState, useEffect} from 'react'
import axios from 'axios'
import Review from './Review'
import CafeHeader from './CafeHeader'

const CafeReviews = ({ match }) => {
  const [cafe, setCafe] = useState([]);
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    axios.get(`/api/cafe/${match.params.id}`).then((result) => {
      setCafe(result.data);
    })
    axios.get("http://localhost:5000/api/all-reviews")
      .then((review) => {
        setReviews(review.data);
      })
      .catch((err) => {
        console.log(err);
      })
  }, [])

  let filteredReviews = reviews.filter((review) => {
    return review.cafeName === cafe.cafeName;
  });


  return (
    <div>
      <CafeHeader cafe={cafe} />
      <div className="reviews-container">
      <Review reviews={filteredReviews} />
      </div>
    </div>
  )
}

export default CafeReviews

...和子组件之一，Review.jsx , 包含 averageRating我要访问的属性:

import React from 'react'
import axios from 'axios'
import {convertToStars, averageStarRating} from '../helperFunctions'

const Review = (props) => {
  const { reviews } = props;

  const handleClick = (id) => {
    axios
      .delete(`/api/reviews/${id}`)
      .then(() => {
        console.log("review successfully deleted");
      })
      .catch((err) => {
        console.log(err);
      })
  }

  return (
    <div>
      {
      reviews.map((review) => {
        const { title, userName, blurb, stars, _id } = review;

        const starRating = convertToStars(stars)
        const averageRating = averageStarRating(reviews)

        return (
          <div  className = 'review-container'>
            <h1>{title}</h1>
            {starRating.map((item) => {
              return item
            })}
            <h2>{`Review by: ${userName}`}</h2>
            <p>{blurb}</p>
            <button onClick={() => handleClick(_id)}>Delete</button>
          </div>
        )
      })
      }
    </div>
  )
}

export default Review

Answer 1

在父元素 CafeReviews 中设置一个状态，并传递一个函数作为 prop 来更改该状态。

import React,{useState, useEffect, useCallback} from 'react'
import axios from 'axios'
import Review from './Review'
import CafeHeader from './CafeHeader'

const CafeReviews = ({ match }) => {
  const [cafe, setCafe] = useState([]);
  const [reviews, setReviews] = useState([]);
  // change here
  const [infoFromChild, setInfo] = useState(null);
  const getDataFromChild = useCallback(data => setInfo(data),[]);
//
  useEffect(() => {
    axios.get(`/api/cafe/${match.params.id}`).then((result) => {
      setCafe(result.data);
    })
    axios.get("http://localhost:5000/api/all-reviews")
      .then((review) => {
        setReviews(review.data);
      })
      .catch((err) => {
        console.log(err);
      })
  }, [])

  let filteredReviews = reviews.filter((review) => {
    return review.cafeName === cafe.cafeName;
  });


  return (
    <div>
      <CafeHeader cafe={cafe} getDataFromChild={getDataFromChild}/>
      <div className="reviews-container">
      <Review reviews={filteredReviews} />
      </div>
    </div>
  )
}

import React from 'react'
import axios from 'axios'
import {convertToStars, averageStarRating} from '../helperFunctions'

const Review = (props) => {
  const { reviews, getDataFromChild } = props;

  const handleClick = (id) => {
    axios
      .delete(`/api/reviews/${id}`)
      .then(() => {
        console.log("review successfully deleted");
      })
      .catch((err) => {
        console.log(err);
      })
  }

  return (
    <div>
      {
      reviews.map((review) => {
        const { title, userName, blurb, stars, _id } = review;

        const starRating = convertToStars(stars)
        const averageRating = averageStarRating(reviews)
        //added here
        getDataFromChild(averageRating);
        return (
          <div  className = 'review-container'>
            <h1>{title}</h1>
            {starRating.map((item) => {
              return item
            })}
            <h2>{`Review by: ${userName}`}</h2>
            <p>{blurb}</p>
            <button onClick={() => handleClick(_id)}>Delete</button>
          </div>
        )
      })
      }
    </div>
  )
}

export default Review