reactjs - How to link record key prop subtype to value React.FC in a object setup - Stack Overflow

admin管理员组

文章数量:1278823

import React, { ReactElement, FC } from 'react';

type BaseDisplayMode = { label: 'string', value: 'string', 'displayName': string};
type DisplayModeA = BaseDisplayMode & { mode: 'a', a: string};
type DisplayModeB = BaseDisplayMode & { mode: 'b', b: string};
type DisplayModes = DisplayModeA | DisplayModeB;


const displayModeA = (p: DisplayModeA): ReactElement => (<div> Hello </div>);
const displayModeB = (p: DisplayModeB): ReactElement => (<div> Hello </div>);

const strategyProperty: Record<DisplayModes['mode'], FC<DisplayModes>>= {
    a: displayModeA,
    b: displayModeB,
}

How can I make sure that the record key a only accepts displayModeA automatically and same for displayModeB?

Playground link /?ssl=23&ssc=2&pln=1&pc=1#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDejUYCiANkiEgHZZwBiAwnAL5wBmUEIcA5FATFwG4AUAHoRcAOpJiaDkjgwICgBbyAKgE8wSAMpoowMPAAKxFBoDm7AK4UAJthjLgAZziu4KOAHckAIxdgGCRRcW9nNGU4C2AANyQ3DQhrTzhIlAo0eUUfA2DsF2UUXk97OFJiijhNbT0DIwA6IVC4AE1ktOTiOxVgCgBrOAgWd3g+lV55b3MXAC5QlrgAWjgAQXKINBQYYAgqnIqoKprdfUN4cKQSiggnPos0jLg-XhR+xZX1sDMshSUkAAe2gM5CoPiCUROdXOcBcGioKAB2AyPUKxWyqjgAFUEAAZNzeCFDJxXFwfNawlF+CAAv5wQHA0CUC5EuzAFgsK7MzrgYCkKCsVAway8NzDapaU71GDNGCSuAAIRQLiQABFXN9zABZCB2eQAXlw5RQfmks24LhgBgoFi42FiKGI1iQ5q4luttuwXDZLk1GgAcihyFxze77oxhHLtHB1b6zBodXr1oalSrY37E-IAGRGkC6l3cFB2zyhq3hyPy9PxzMKuAp5VqjXV-NwHN4PN611+Yt+UseiNCKPyKva-NuQ0jhP59YAHxjTdHeoVwmasgolrgPoz07rcAAFGBzZPM6sAJTm5DoGAkMjc-UAPn3AB42bFHwAJaTEJRPkSv++nsIa4bluzZLruB5HguU5Lue+BXjeoLwA+z7-nAn7EN+cC-v+gGrnsG7utsSAWBoxjsMCcoXkgshQHYT7HmOADaXAdkgXAALrYPQDHQZmLj3veho4EIcBiSWm58dOmCieJvaSXGi5IAqMmMEAA

import React, { ReactElement, FC } from 'react';

type BaseDisplayMode = { label: 'string', value: 'string', 'displayName': string};
type DisplayModeA = BaseDisplayMode & { mode: 'a', a: string};
type DisplayModeB = BaseDisplayMode & { mode: 'b', b: string};
type DisplayModes = DisplayModeA | DisplayModeB;


const displayModeA = (p: DisplayModeA): ReactElement => (<div> Hello </div>);
const displayModeB = (p: DisplayModeB): ReactElement => (<div> Hello </div>);

const strategyProperty: Record<DisplayModes['mode'], FC<DisplayModes>>= {
    a: displayModeA,
    b: displayModeB,
}

How can I make sure that the record key a only accepts displayModeA automatically and same for displayModeB?

Playground link https://www.typescriptlang./play/?ssl=23&ssc=2&pln=1&pc=1#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDejUYCiANkiEgHZZwBiAwnAL5wBmUEIcA5FATFwG4AUAHoRcAOpJiaDkjgwICgBbyAKgE8wSAMpoowMPAAKxFBoDm7AK4UAJthjLgAZziu4KOAHckAIxdgGCRRcW9nNGU4C2AANyQ3DQhrTzhIlAo0eUUfA2DsF2UUXk97OFJiijhNbT0DIwA6IVC4AE1ktOTiOxVgCgBrOAgWd3g+lV55b3MXAC5QlrgAWjgAQXKINBQYYAgqnIqoKprdfUN4cKQSiggnPos0jLg-XhR+xZX1sDMshSUkAAe2gM5CoPiCUROdXOcBcGioKAB2AyPUKxWyqjgAFUEAAZNzeCFDJxXFwfNawlF+CAAv5wQHA0CUC5EuzAFgsK7MzrgYCkKCsVAway8NzDapaU71GDNGCSuAAIRQLiQABFXN9zABZCB2eQAXlw5RQfmks24LhgBgoFi42FiKGI1iQ5q4luttuwXDZLk1GgAcihyFxze77oxhHLtHB1b6zBodXr1oalSrY37E-IAGRGkC6l3cFB2zyhq3hyPy9PxzMKuAp5VqjXV-NwHN4PN611+Yt+UseiNCKPyKva-NuQ0jhP59YAHxjTdHeoVwmasgolrgPoz07rcAAFGBzZPM6sAJTm5DoGAkMjc-UAPn3AB42bFHwAJaTEJRPkSv++nsIa4bluzZLruB5HguU5Lue+BXjeoLwA+z7-nAn7EN+cC-v+gGrnsG7utsSAWBoxjsMCcoXkgshQHYT7HmOADaXAdkgXAALrYPQDHQZmLj3veho4EIcBiSWm58dOmCieJvaSXGi5IAqMmMEAA

• reactjs
• typescript

Share Improve this question Follow asked Feb 24 at 10:39 Swastik PareekSwastik Pareek 9011 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

try to use FC from react

const displayModeA : FC<DisplayModeA>=(p) => (<div> Hello </div>);
const displayModeB : FC<DisplayModeB>=(p) => (<div> Hello </div>);

const strategyProperty: Record<DisplayModes['mode'], FC<DisplayModes>>= {
    a: displayModeA as FC<DisplayModes>,
    b: displayModeB as FC<DisplayModes>,
}

本文标签： reactjsHow to link record key prop subtype to value ReactFC in a object setupStack Overflow