मैं एक टाइपस्क्रिप्ट रिएक्ट ऐप बनाने की कोशिश कर रहा हूं और styled-components का उपयोग करते समय एक समस्या में चला गया हूं। मैं जो प्रयास कर रहा हूं उसका एक मोटा विचार नीचे दिया गया है:

import React from 'react';
import styled from 'styled-components';

export type MyProps = {
  wrapper?: React.Component,
};

const DefaultWrapper = styled.div`
  background: blue;
`;

const MyComponent = ({wrapper: Wrapper = DefaultWrapper}: MyProps) => {
  return <Wrapper className='my-wrapper'>
    Some child content
  </Wrapper>;
}

export default MyComponent;

मेरी समस्या तब आती है जब मैं किसी अन्य घटक के भीतर MyComponent प्रस्तुत करने का प्रयास करता हूं क्योंकि यह JSX element type 'Wrapper' does not have any construct or call signatures कहने में त्रुटि उत्पन्न करता है।

मैं कुछ तरीका चाहता हूं कि मैं एक स्टाइल घटक का उपयोग डिफ़ॉल्ट मान के रूप में या wrapper प्रोप के लिए वैध मान के रूप में कर सकूं ताकि यह उजागर न हो कि मैं आंतरिक रूप से स्टाइल घटकों का उपयोग कर रहा हूं। किसी भी सहायता की सराहना की जाएगी।

0
Jake Conkerton-Darby 5 अक्टूबर 2020, 00:28

1 उत्तर

सबसे बढ़िया उत्तर

संकट

React.Component एक प्रतिक्रिया वर्ग तत्व है (एक प्रकार नहीं), इसके बजाय, React.ComponentType<any> प्रकार का उपयोग करें। यदि आप घटक प्रकार की बाधाओं के साथ काम कर रहे हैं और wrapper कुछ प्रकार के घटक होने की उम्मीद करते हैं, तो React.ComponentType<any> को आवश्यक बाधाओं के साथ स्वैप करें - जैसे React.ComponentClass<any, any> कक्षा के लिए- कार्यात्मक घटकों के लिए आधारित घटक या React.FC<any>

समाधान

import * as React from "react";
import styled from "styled-components";

export type MyProps = {
  wrapper?: React.ComponentType<any>;
};

const DefaultWrapper = styled.div`
  background: blue;
`;

const MyComponent = ({ wrapper: Wrapper = DefaultWrapper }: MyProps) => {
  return <Wrapper className="my-wrapper">Some child content</Wrapper>;
};

export default MyComponent;

वर्किंग रेपो

'React' was used before it was defined. एस्लिंट चेतावनी पर ध्यान न दें, यह एक कोडसैंडबॉक्स समस्या है -- स्थानीय रूप से ठीक काम करती है:

Edit Typescript - Defaults

1
Matt Carlotta 5 अक्टूबर 2020, 01:54