টাইপসক্রিপ্ট + প্রতিক্রিয়া / রেডাক্স: 'ইন্ট্রিনিস্টিকঅ্যাট্রিবিউটস এবং ইন্ট্রিনসিক ক্লাসঅ্যাট্রিবিউটস টাইপে সম্পত্তি "এক্সএক্সএক্সএক্স" বিদ্যমান নেই

Question 1

আমি টাইপসক্রিপ্ট, প্রতিক্রিয়া এবং রেডাক্স (সমস্ত ইলেক্ট্রন চলমান) নিয়ে একটি প্রকল্পে কাজ করছি, এবং যখন আমি অন্য শ্রেণীর উপর ভিত্তি করে একটি শ্রেণিভিত্তিক উপাদান অন্তর্ভুক্ত করছি এবং তাদের মধ্যে পরামিতিগুলি পাস করার চেষ্টা করছি তখন আমি একটি সমস্যার মুখোমুখি হয়েছি। আলগাভাবে বলতে গেলে, আমি ধারক উপাদানটির জন্য নিম্নলিখিত কাঠামোটি পেয়েছি:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

এবং সন্তানের উপাদান:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

স্পষ্টতই আমি কেবলমাত্র বেসিকগুলিই অন্তর্ভুক্ত করছি এবং এই ক্লাসগুলির উভয়ের মধ্যে আরও অনেক কিছু রয়েছে তবে আমি যখন চেষ্টা করি এবং বৈধ কোডের মতো আমার কাছে যা দেখায় তেমন চালায় তখনও আমি একটি ত্রুটি পেয়ে যাচ্ছি। আমি যে সঠিক ত্রুটি পাচ্ছি:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

যখন আমি প্রথম ত্রুটির মুখোমুখি হলাম তখন আমি ভেবেছিলাম কারণ এটি আমার প্রপস সংজ্ঞায়িত করার জন্য একটি ইন্টারফেসে যাচ্ছিল না, তবে আমি এটি তৈরি করেছি (আপনি উপরে দেখতে পারেন) এবং এটি এখনও কার্যকর হয় না। আমি ভাবছি, আমি এখানে কিছু মিস করছি?

আমি যখন কনটেইনার কম্পোনেন্টের কোড থেকে চাইল্ড কম্পোনেন্টের প্রস্তাবটি বাদ দিই তখন এটি ঠিক জরিমানা করে (আমার চাইল্ডকমম্পোনেন্টের সমালোচনা না করে) তবে জেএসএক্স টাইপস্ক্রিপ্টে এটি সংকলন করতে অস্বীকার করে। আমি মনে করি এই নিবন্ধের উপর ভিত্তি করে সংযোগের মোড়ক নিয়ে কিছু করার থাকতে পারে তবে এই নিবন্ধটিতে সমস্যাগুলি সূচক.টিএসএক্স ফাইলে এসেছিল এবং এটি সরবরাহকারীর ক্ষেত্রে একটি সমস্যা ছিল এবং আমি আমার সমস্যা অন্য কোথাও পাচ্ছি।

Question 2

সুতরাং কিছু সম্পর্কিত উত্তর পড়ার পরে (বিশেষত এটি এবং এটির একটি এবং প্রশ্নের উত্তর @ বাসরতের উত্তরের দিকে তাকানোর পরে) আমি এমন কিছু আবিষ্কার করতে সক্ষম হয়েছি যা আমার পক্ষে কাজ করে It ধারক উপাদানটির স্পষ্ট ইন্টারফেস, সুতরাং এটি যে প্রপসটি পাস করার চেষ্টা করছে তা দ্বারা বিভ্রান্ত হয়েছিল।

সুতরাং ধারক উপাদানটি একই ছিল, তবে সন্তানের উপাদানটি কিছুটা পরিবর্তিত হয়েছে:

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

উপরেরটি আমার পক্ষে কাজ করতে পেরেছিল। উপাদানটি ধারকটির কাছ থেকে প্রত্যাশা করা হয়েছে এমন স্পষ্টভাবে প্রসেস করা দেখে মনে হচ্ছে এটি কাজ করছে এবং উভয় উপাদানই যথাযথভাবে রেন্ডার হয়েছে।

দ্রষ্টব্য: আমি জানি এটি একটি খুব সরল উত্তর এবং আমি কেন নিশ্চিতভাবে নিশ্চিত যে এটি কেন কাজ করে না, তাই যদি আরও অভিজ্ঞ প্রতিক্রিয়া নিনজা এই উত্তরটির উপর কিছু জ্ঞান ফেলে দিতে চায় তবে আমি এটিকে সংশোধন করতে পেরে খুশি হব।

Question 3

পরিবর্তে export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);, connectআলংকারিককে পছন্দ করুন https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146

@connect((state: StoreState): Props => {
    return {
        filePaths: state.filePaths,
        filePathsCompleted: state.filePathsCompleted,
        rootDir: state.rootDir,
        activeProjectFilePathTruthTable: state.activeProjectFilePathTruthTable,
        fileTreeShown: state.fileTreeShown,
    };
})

সংযোগটি এখানে সংজ্ঞায়িত করা হয়েছে https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

কেন?

আপনি যে সংজ্ঞাগুলি ব্যবহার করছেন তা সম্ভবত পুরানো বা অবৈধ (সম্ভবত খারাপ লেখেনি)।