我真的很新來反應和打字稿，但我試圖從添加樣式組件樣式的函式內部回傳一個反應元素，問題是當將樣式元素作為反應元素回傳時，它指出 '' 正在被使用作為型別而不是值
import React, { ReactElement } from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes, StyledComponent } from 'styled-components';
import { CircleProps } from './Types';
// export type CircleProps = {
// rotate?: number;
// delay?: number;
// }
const circleFadeDelay = keyframes`
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
`;
const Circle = ({rotate, delay}: CircleProps) => {
const CirclePrimitive = styled.div`
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
${rotate &&
`
-webkit-transform: rotate(${rotate}deg);
-ms-transform: rotate(${rotate}deg);
transform: rotate(${rotate}deg);
`} &:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #999;
border-radius: 100%;
animation: ${circleFadeDelay} 1.2s infinite ease-in-out both;
${delay &&
`
-webkit-animation-delay: ${delay}s;
animation-delay: ${delay}s;
`};
}
`;
return <CirclePrimitive />;
};
Circle.propTypes = {
delay: PropTypes.number,
rotate: PropTypes.number,
};
export default Circle;
呼叫它的元素
import React from 'react';
import Circle from './Circle';
import Wrapper from './Wrapper';
const LoadingIndicator = () => (
<Wrapper>
<Circle />
<Circle rotate={30} delay={-1.1} />
<Circle rotate={60} delay={-1} />
<Circle rotate={90} delay={-0.9} />
<Circle rotate={120} delay={-0.8} />
<Circle rotate={150} delay={-0.7} />
<Circle rotate={180} delay={-0.6} />
<Circle rotate={210} delay={-0.5} />
<Circle rotate={240} delay={-0.4} />
<Circle rotate={270} delay={-0.3} />
<Circle rotate={300} delay={-0.2} />
<Circle rotate={330} delay={-0.1} />
</Wrapper>
);
export default LoadingIndicator;
和錯誤
'CirclePrimitive' refers to a value, but is being used as a type here. Did you mean 'typeof CirclePrimitive'?
我想知道我是否必須轉義“< />”字符以防止打字稿嘗試將其作為型別檢查讀取，或者我是否需要在函式上宣告函式回傳型別檢查，但這些似乎都沒有幫助
uj5u.com熱心網友回復：
感謝您的輸入，但是一旦我將檔案名從“.ts”更改為“.tsx”，它就開始作業，因為我需要在代碼中使用 jsx 時隨時使用 tsx，
它只是我從我想玩的 react 樣板專案中復制的一個組件，但我同意它似乎沒有得到很好的實施
uj5u.com熱心網友回復：
更新：
為什么要回傳組件內的組件？在這個用例中似乎是多余的。
我只是查看了檔案，他們的做法有所不同。
我做了一個小演示來解決你的問題。注意 prop 語法的實作方式。
CodeSandbox：https ://codesandbox.io/s/admiring-cloud-3jld4 ? file =/ src/App.tsx
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337017.html