reactjs - Typescript+React/Redux: الخاصية "XXX" غير موجودة في النوع "IntrinsicAttributes & IntrinsicClassAttributes




electron jsx (2)

بدلاً من 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

لماذا ا؟

يبدو أن التعريفات التي تستخدمها قد تكون قديمة أو غير صالحة (ربما تكون مؤلفة بشكل سيء).

أنا أعمل في مشروع مع Typescript و React و Redux (جميعها تعمل في Electron) ، وقد واجهت مشكلة عندما أقوم بتضمين مكونًا قائمًا على فصل واحد في آخر وأحاول تمرير المعلمات بينهما. بشكل عام ، لدي البنية التالية لمكون الحاوية:

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...'.

عندما واجهت الخطأ لأول مرة ، اعتقدت أنه كان لأني لم أقم بتمرير واجهة تعيّن الدعائم الخاصة بي ، لكنني خلقت ذلك (كما ترون أعلاه) ولا يزال لا يعمل. أنا أتساءل ، هل هناك شيء أفتقده؟

عندما أقوم باستبعاد سند ChildComponent من الكود الموجود في ContainerComponent ، فإنه يجعله جيدًا (بصرف النظر عن عدم وجود دعم حرج لدى ChildComponent) ولكن مع ذلك في JSX Typescript يرفض تجميعه. أعتقد أن الأمر قد يكون له علاقة بتغليف الاتصال استنادًا إلى هذه المقالة ، ولكن المشاكل في تلك المقالة حدثت في ملف index.tsx وكانت مشكلة مع الموفر ، وأواجه مشكلاتي في مكان آخر.


لذلك بعد قراءة بعض الإجابات ذات الصلة (وتحديداً هذه الإجابة والإجابة على هذا السؤال والنظر إلى إجابة @ basarat على السؤال ، تمكنت من العثور على شيء يناسبني. يبدو (بالنسبة إلى عيني React الجديدة نسبيًا) مثل Connect لا يوفر واجهة صريحة لمكون الحاوية ، لذلك كان مرتبكًا من قبل prop الذي كان يحاول المرور به.

لذا بقي مكون الحاوية كما هو ، لكن المكون الفرعي تغير قليلاً:

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);

ما سبق تمكنت من العمل بالنسبة لي. يبدو أن تمرير الدعائم التي يتوقعها المكون من الحاوية بشكل صريح يبدو أنه تم تقديم كلا المكونين بشكل صحيح.

ملاحظة: أعلم أن هذه إجابة مبسطة للغاية ولست متأكدًا تمامًا من السبب وراء هذا الأمر ، لذلك إذا أرادت React ninja الأكثر خبرة إسقاط بعض المعرفة حول هذه الإجابة ، سأكون سعيدًا بتعديلها.