我想访问另一个组件中处于另一个状态的数据到这个组件

Question

我想访问另一个组件中处于另一个状态的数据到这个组件。我制作了一个带有 h1 标题的弹出窗口，但我无法检索另一个组件中处于另一个状态的值。我试过这样，但它只显示标题但没有值。我如何在 react js 功能组件中做到这一点。

import React from 'react'
import data from "./MyVehicles"
import "./InfoYes.css"

function Info({ setShowInfoYes }) {
    return (
        <div className="modal">
      <div className="box">
         
          <h1 className="h1__info"> Name: {data.name}</h1>
            <h1 className="h1__info"> Vehicle type: {data.vechiletype}</h1>
            <h1 className="h1__info"> vehicle name: {data.selectvehicle}</h1>
            <h1 className="h1__info"> registration date: {data.registrationdate}</h1>
            <h1 className="h1__info"> tax expire date: {data.taxexpiredate}</h1>
            <h1 className="h1__info"> pick up: {data.pickup}</h1>
            <button className="calculate__button">Calculate</button>
          </div>
        </div>
        
    )
}

export default Info

Answer 1

以下是您的表单组件：

...code...
return (
        ..other divs..
    <Info data={data} setShowInfoYes={provide some value here}/>
    )

信息组件：

import React from 'react'
import "./InfoYes.css"

export default ({ data, setShowInfoYes }) => {
 
  return(
<div className="modal">
      <div className="box">
         
          <h1 className="h1__info"> Name: {data.name}</h1>
            <h1 className="h1__info"> Vehicle type: {data.vechiletype}</h1>
            <h1 className="h1__info"> vehicle name: {data.selectvehicle}</h1>
            <h1 className="h1__info"> registration date: {data.registrationdate}</h1>
            <h1 className="h1__info"> tax expire date: {data.taxexpiredate}</h1>
            <h1 className="h1__info"> pick up: {data.pickup}</h1>
            <button className="calculate__button">Calculate</button>
          </div>
        </div>
  )
  
}

如果 Info 的 prop 中存在 setShowInfoYes，那么它的值也必须传递，而不仅仅是数据的值。