score:1
i would probably declare superpropstype.children
as:
children: react.reactelement<subpropstype1> | react.reactelement<subpropstype1>[];
to account for the possibility of having both a single and multiple children.
in any case, as pointed out already, that won't work as expected.
what you could do instead is declare a prop, let's say subcomponentprops: subpropstype1[]
, to pass down the props you need to create those subcomponent1
s, rather than their jsx, and render them inside supercomponent
:
interface superpropstype {
children?: never;
subcomponentprops?: subpropstype1[];
}
...
const supercomponent: react.fc<superpropstype> = ({ subcomponentprops }) => {
return (
...
{ subcomponentprops.map(props => <subcomponent1 key={ ... } { ...props } />) }
...
);
};
score:12
as of typescript 3.1, all jsx elements are hard-coded to have the jsx.element
type, so there's no way to accept certain jsx elements and not others. if you wanted that kind of checking, you would have to give up the jsx syntax, define your own element factory function that wraps react.createelement
but returns different element types for different component types, and write calls to that factory function manually.
there is an open suggestion, which might be implemented as soon as typescript 3.2 (to be released in late november 2018), for typescript to assign types to jsx elements based on the actual return type of the factory function for the given component type. if that gets implemented, you'll be able to define your own factory function that wraps react.createelement
and specify it with the jsxfactory
compiler option, and you'll get the additional type information. or maybe @types/react
will even change so that react.createelement
provides richer type information, if that can be done without harmful consequences to projects that don't care about the functionality; we'll have to wait and see.
Source: stackoverflow.com
Related Query
- React Component children typecheck with typescript
- React component with arbitrary number of children in TypeScript
- How to use children with React Stateless Functional Component in TypeScript?
- Using a forwardRef component with children in TypeScript
- React - useRef with TypeScript and functional component
- Testing a React component with Enzyme. Typescript can't find instance methods
- Writing a React higher-order component with TypeScript
- Typescript with React - use HOC on a generic component class
- React TypeScript component with two different prop interfaces
- React component with two sets of children
- How to use jest.spyOn with React function component using Typescript
- Typing a React component that clones its children to add extra props in TypeScript
- ReactJS TypeScript pure component with children
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- Force React component naming with TypeScript
- Overriding children prop in React with Typescript 3.5+
- Use TypeScript Enum with PropTypes to define React Component props
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- Generic React TypeScript component with 'as' prop (able to render any valid dom node)
- Creating reusable Button Component with React and Typescript with not assignable type error
- Is it possible to type a React function component with TypeScript without using arrow functions?
- How to test with jest and typescript with types a basic react function component
- How to type a Typescript React Component that accepts a Context with a super-set of properties
- Dispatching a Redux Thunk action outside of a React component with TypeScript
- How to correctly export SVGs in a React component library with TypeScript
- creating dynamic component names in react with typescript 3.2.2
- Pass component props in Private Route with Typescript and React
- Typescript React Functional Component with props.children
- Is it possible in React Typescript to use a component prop interface with another prop?
- How to Configure Webpack with Shebang Loader to Ignore Hashbang Importing Cesium React Component into Typescript React Component
More Query from same tag
- Making webpack 5 asset loader work with webpack-dev-server
- how to pass urls, params, headers to call() in redux-saga?
- render method being called before API data is loaded in React
- React Router with Express, subpages are not routing correctly in production
- Refactoring how react/node handles response
- Warning: React does not recognize the `previousStep` prop on a DOM element
- Usability of Protractor outside of AngularJS
- Smooth transition of images in carousel in React
- react-bootstrap-table-next on selectRow selects all Rows
- Using react.useEffect and mobx.autorun together
- Using Modals within a table row
- Trying to use react to trigger different components with the same function
- React Native - navigation issue "undefined is not an object (this.props.navigation.navigate)"
- Trouble with React Router in deploy
- How to set focus a ref using React-Hook-Form
- "The final argument passed to useEffect changed size between renders", except I don't think it does?
- Styled-components: Override component style inside a new component
- Getting an issue while integrating google-cloud with webpack
- Why isn't Form.Select recognized in my simple react-bootstrap app, following the react-bootstrap documentation?
- History hook React make warning. This is a no-op, but it indicates a memory leak in your application
- Firebase Firestore - React.js - Get Singular Document Values by ID (Make it Return json Object)
- Is it possible not to make all columns filterable in React table
- Integrating Microsoft Teams Embedded Share Button in React web app
- [React-Context]: Form validation error fails to show up the first time
- Fetching data with redux actions
- React semantic ui table.row set row active onclick
- Updating Data in Firebase using React
- Ho can i return a Custom HTML div in React JS?
- React redirect using react-router-dom not working
- ReactJS: How can I center the placeholder and text for Material-UI's <DatePicker/>?