How to define props in TypeScript where a parent component injects props in its children

0 votes

When a component clones its children to inject props into them, how to define the children props type?

I'm receiving an error cause injectedProps is expected in Child

const Parent: React.SFC<ParentProps> = ({ children }) => (
  <div>
    {React.cloneElement(children[0], { injectedProp: 'foo' })}
  </div>
);

const Child: React.SFC<ChildProps> = ({ injectedProp }) => (
  <div attr={injectedProp} />
);

type ChildProps = {
  injectedProp: string;
};

<Parent>
  <Child />
</Parent>

Error in Child: injectedProp is missing

Jun 15, 2022 in TypeSript by Logan
• 2,140 points
622 views

1 answer to this question.

0 votes

Typescript doesn't remove this special rule "!text" while transpiling into js file for some reason, (even with moduleResolution set to "node")

 transpiled js file

thus it causes file path resolve failed. (tested with typescript v2.2.1, node.js v6.9.5)

The documents need an update.

Here is a workable version by add custom file extensions:

index.d.ts

declare module "*.html" {
    const value: string;
    export default value;
}

Extend nodejs module extensions to read *.html into pure text

require.extensions['.html'] = function(module, filename) {
    module.exports = fs.readFileSync(filename, 'utf8');
}

And from your example it should works this way:

import * as layout from "./js/views/layouts/wnd.html";
console.log(layout);
answered Jun 16, 2022 by Nina
• 3,020 points

Related Questions In TypeSript

0 votes
1 answer

How can I define a type for a CSS color in TypeScript?

There was a proposal for a type of ...READ MORE

answered Jun 15, 2022 in TypeSript by Nina
• 3,020 points
643 views
0 votes
1 answer
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,020 points
87 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1, 2022 in TypeSript by Nina
• 3,020 points
577 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 51,600 points
1,272 views
0 votes
1 answer

"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

The first thing to highlight is that ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 11,450 points
2,023 views
0 votes
1 answer

Typescript: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Double check the newly added object types. ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,020 points
19,312 views
0 votes
1 answer

TypeScript and React Native: Are the type definitions for RN styles wrong?

You can test some of ways for ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,020 points
1,104 views
0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,020 points
2,178 views
0 votes
1 answer

How to typecast a string to number in TypeScript?

You can use the parseInt or parseFloat functions, or simply use ...READ MORE

answered Jun 9, 2022 in TypeSript by Nina
• 3,020 points
64 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP