這是我第一次使用打字稿，我有多個界面，每個界面都有一個標題，而且這個標題在所有頁面上的樣式都是一樣的，所以我決定使用動態的方法，我在“ SelectInterests" 組件，我應該將以下資料傳遞給第二個組件：
title_part_1
title_part_2
但我有這個錯誤：
Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
這個錯誤：
Type '{ title_part_1: string; title_part_2: string; }' is not assignable to type 'string'
StepperTitle.tsx：
import { Center, VStack, Text, Box } from '@chakra-ui/react';
import React from 'react';
const StepperTitle = (title_part_1: string, title_part_2: string) => {
return (
<>
<Box>
<VStack>
<Text
fontWeight='700'
fontSize={['18px', '23px', '23px', '25px', '28px']}
lineHeight='34px'
color='#434E61'
>
{title_part_1}
</Text>
<Center>
<Text
fontWeight='700'
fontSize={['18px', '23px', '23px', '25px', '28px']}
lineHeight='34px'
color='#434E61'
>
{title_part_2}
</Text>
</Center>
</VStack>
</Box>
</>
)
}
export default StepperTitle;
選擇興趣.tsx：
import { VStack, Box, Text, Center, Circle, Stack, Image, Grid, HStack, Button, Link } from '@chakra-ui/react';
import React from 'react';
import InterestCard from '../helper-stepper/interestCard';
import MessageModal from '../helper-stepper/messageModal';
import StepperTitle from '../shared/stepper-title';
const SelectInterests = () => {
const [counter, setCounter] = React.useState(0);
const hasPickedTreeOrMore = counter >= 3;
const imageClickable = () => {
setCounter(counter 1);
console.log('I am inside counter: ', counter);
}
const stopCounter = () => {
if (counter < 3) {
return true;
}
else return false;
}
const getColor = () => {
if (counter < 3) {
return '#B3B3B3;'
}
else {
return '#FF8C1E'
}
}
const clickButton = () => {
console.log('click on meeeeeeee')
}
const [isHovering, setIsHovering] = React.useState(false);
const handleMouseEnter = () => {
setIsHovering(true);
};
const handleMouseLeave = () => {
setIsHovering(false);
};
return (
<VStack pt='72.35px'>
<StepperTitle title_part_1=' Tell us what you’re' title_part_2='interested in' />
<Stack>
<HStack pt='73px'>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
{/* <Text>Hi</Text> */}
<Link onClick={imageClickable}>
<Image src='images/interest-1.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="10px"
h='125.04px'
overflow="hidden"
style={{
backgroundColor: isHovering ? 'red' : '',
color: isHovering ? 'white' : '',
borderColor: isHovering ? 'red': '',
borderWidth: isHovering ? '1px' : ''
}}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Link onClick={imageClickable}>
<Image src='images/interest-2.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-3.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-4.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
</HStack><HStack pt='73px'>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-5.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-6.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-7.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
{/* <span onMouseOver="this.style.color='red'" onMouseOut="this.style.color='black'" > */}
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}
style={{}}
>
<Image src='images/interest-8.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
{/* </span> */}
</HStack>
<Box pt='53.11px' pb='12.87px'>
<Center>
{hasPickedTreeOrMore ? (
<MessageModal counter={counter} />
) : (
<Button
w='244.71px'
h='41.14px'
// colorScheme='orange'
bg={getColor()}
color='white'
borderRadius='8px'
p='10px' m='10px'
onClick={clickButton}
isDisabled={stopCounter()}
>
pick 3 more
</Button>
)}
</Center>
</Box>
</Stack>
</VStack>
)
}
export default SelectInterests;
uj5u.com熱心網友回復：
在 React 中，props 作為物件傳遞，而不是作為單獨的引數傳遞。閱讀有關組件和道具的檔案以獲取詳細資訊。
您需要重新定義<StepperTitle>組件以反映這一點，以便它接受一個引數，該引數是具有所需型別的道具物件，因此請更改：
const StepperTitle = (title_part_1: string, title_part_2: string) => {
至：
const StepperTitle = ({ title_part_1, title_part_2 }: { title_part_1: string, title_part_2: string }) => {
現在發生的事情是 React 將整個 props 物件傳遞給第一個引數 ( title_part_1)，這意味著是一個字串，這就是你得到那個型別錯誤的原因。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/514932.html
標籤：反应打字稿
上一篇：將axios資料分配給useState時出現雙重串列
下一篇：如何說服打字稿接受該陣列不為空？