javascript - ReactJS / Gatsby Js - 将子组件的值传递给父组件以获取按钮 onClick 链接
问题描述
我有一个简单的组件,需要将链接值从子组件传递回父组件中的函数,但它只回调完整函数而不是它的值。当我包含“ 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
解决方案
将值放入状态并生成<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>
。
根据整个实现,您可能需要将功能保存在 a 中useEffect
,以便在链接值更改时触发该功能,但想法是相同的。
推荐阅读
- python - 如何更改熊猫堆积条形图中一个条形的颜色
- c++ - l 值引用对象上的 Constexpr 成员函数:Clang 和 gcc 不同意
- ruby - 如何在 ruby 中引用 aws lambda 中的参数
- ruby - 将假定的秒数转换为持续时间?
- flutter - 不在主屏幕上时,可重新排序的列表会出现键盘故障
- java - 由于时间问题,JSprit 不使用更近的车辆
- apache-nifi - Jolt 转换为具有父属性的数组
- java - 对多于两列的组合的唯一约束
- angular - core.js:9110 错误类型错误:无法读取未定义的属性“帖子”
- apache-kafka - Kafka Connect 配置和“消费者”。字首