ReactJS / Gatsby Js - 将子组件的值传递给父组件以获取按钮 onClick 链接

Question

我有一个简单的组件，它需要将链接值从子组件传回给父组件中的函数，但它只回调完整的函数而不是它的值。当我包含“navigate(/...)` 时，它可以工作，但会自动转到页面。我知道我错过了一些超级简单的东西，但它需要很长时间才能弄清楚。请参阅下面的代码。

//Parent Component
function ZodiacMDates({getDate}) {
  const zodiacSigns = [
    {
     id: 1,
     asign: 'Aries',
     link: 'aries',
     title: 'The Aries Mars Man',
     AriesSdate1: '158590800000', // '01/10/1975'
     AriesEdate1: '254494800000', // '01/24/1978'
     AriesSdate2: '350053200000', // '02/03/1981'
     AriesEdate2: '447253200000'  // '03/04/1984'
    },
    {
     id: 2,
     asign: 'Taurus',
     link: 'taurus',
     title: 'The Taurus Mars Man',
     TaurusSdate1: '-1244372400000', // '07/27/1930'
     TaurusEdate1: '-1186225200000', // '05/30/1932'
     TaurusSdate2: '496501200000',   // '09/25/1985'
     TaurusEdate2: '521298000000'   // '07/09/1986'
       }
    ]

const clickMan = (chosenZodiac) => {
    return (
     chosenZodiac
    )
  // return (
  // navigate(`/${chosenZodiac}`)
  // )
  }

const zodiacSignsMap = zodiacSigns.map(sign => <ZodiacMCheck 
                                                      key={sign.id} 
                                                      sign={sign} 
                                                      getDate = {getDate} 
                                                      findZodiac = {clickMan} />)
      return <div>
      {zodiacSignsMap}
    // This button Does not work
     <button onClick={()=>{navigate(`/${clickMan}`)}}>Find Me!</button>
      </div>


//Child Component
function ZodiacMCheck({getDate, sign, findZodiac}) {
   
    const zodiacLink = () => {
    return (
      findZodiac(sign.link)
        )
    }
    
    // Check For Aries
    if ((sign.AriesSdate1 <= getDate && sign.AriesEdate1 >= getDate) ||
        (sign.AriesSdate2 <= getDate && sign.AriesEdate2 >= getDate ) ||     
        //Check For Taurus
        (sign.TaurusSdate1 >= getDate && sign.TaurusEdate1 <= getDate) // Negative
        || (sign.TaurusSdate2 <= getDate && sign.TaurusEdate2 >= getDate )) {
           let zodiacSign = zodiacLink();
            return (
                <div>
               {zodiacsign}
                </div>
            )
        } 
                else {
            return (null)
        }
}

export default ZodiacMCheck

Answer 1

将值放入状态并基于该状态生成<Link>。

//Parent Component
function ZodiacMDates({getDate}) {
  const [link, setLink]=useState("");
  const zodiacSigns = [
    {
     id: 1,
     asign: 'Aries',
     link: 'aries',
     title: 'The Aries Mars Man',
     AriesSdate1: '158590800000', // '01/10/1975'
     AriesEdate1: '254494800000', // '01/24/1978'
     AriesSdate2: '350053200000', // '02/03/1981'
     AriesEdate2: '447253200000'  // '03/04/1984'
    },
    {
     id: 2,
     asign: 'Taurus',
     link: 'taurus',
     title: 'The Taurus Mars Man',
     TaurusSdate1: '-1244372400000', // '07/27/1930'
     TaurusEdate1: '-1186225200000', // '05/30/1932'
     TaurusSdate2: '496501200000',   // '09/25/1985'
     TaurusEdate2: '521298000000'   // '07/09/1986'
       }
    ]

const clickMan = (chosenZodiac) => {
   setLink(chosenZodiac)
  // return (
  // navigate(`/${chosenZodiac}`)
  // )
  }

const zodiacSignsMap = zodiacSigns.map(sign => <ZodiacMCheck 
                                                      key={sign.id} 
                                                      sign={sign} 
                                                      getDate = {getDate} 
                                                      findZodiac = {clickMan} />)
      return <div>
      {zodiacSignsMap}
     <Link to={link}>Find me!</Link>

我并没有改变你的逻辑，你有一个完全有效的函数findZodiac/clickMan（findZodiac 作为道具传递，clickMan 在父组件中）接收值。因此，只需使用 useState 挂钩来保存该值并相应地设置一个有效的 <Link>。

根据整个实现，您可能需要将功能保存在useEffect 中，以便在链接值更改时触发该功能，但思路是一样的。