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

Question

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

Answer 1

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

 

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

If you need to know more about React, Its recommended to join React JS Online Course today.