score:0
You should have it working since TS version 3.1 (see section "Properties declarations on functions")
score:1
You can write an interface that extends React.FC
with your custom static method, then assign that interface to your functional component.
// Extends FC with custom static methods
interface ComponentWithStaticMethod<TProps> extends React.FC<TProps> {
staticMethod: (value: string) => void;
}
// Your component with the interface
const Component: ComponentWithStaticMethod<{}> = () => {
// Your component goes here...
return null;
}
// Declare your static method for your functional component
Component.staticMethod = (value: string): void => {
console.log(value);
}
score:4
My answer is not exact to your question. But I think will be helpful for someone who wants to add a static component to the function component.
import React from 'react';
import { Text } from 'react-native';
import Group, { RadioButtonGroupProps } from './Group';
type RadioButtonType = {
text: string,
};
interface StaticComponents {
Group?: React.FC<RadioButtonGroupProps>
}
const RadioButton: React.FC<RadioButtonType> & StaticComponents =
({ text }) => (<Text>{text}</Text>);
RadioButton.Group = Group;
export default RadioButton;
Remember config like this if you want to import React from 'react'
directly instead of import * React from 'react'
Achievement:
score:5
This would be easier to do by using a class component since the static
functions and property types can be inferred in class definitions.
class Speakers extends React.Component<Props> {
static GetMyArray = () => [1, 2, 3, 4]
render() {
const { isLoading } = this.props
if (isLoading) {
const x = Speakers.GetMyArray(); // works great
return (
<div>{JSON.stringify({x})}</div>
);
} else {
return <div></div>;
}
}
}
That said, you could do it extending React.SFC
or using an intersection type:
const Speakers: React.SFC<Props> & { GetMyArray?: () => number[]; } = (props) => {
const { isLoading } = props
if (isLoading) {
const x = Speakers.GetMyArray!(); // works, sorta
return (
<div>{JSON.stringify({x})}</div>
);
} else {
return <div></div>;
}
}
You'll have to mark GetMyArray
as optional because you cannot define it at the same time as you define the function, so you'll have to use a !
operator (or check that the function exists) when calling the static function. The !
in Speakers.GetMyArray!();
tells the type checker that you know what you're doing and that GetMyArray
is not indeed undefined
. See here to read about the non-null assertion operator
Update
I did not see that using React.FC
is now the preferred way to use function components since function components can no longer be considered stateless.
If you can get away with only using const Speakers = (props: Props) => ...
then upgrading TypeScript to 3.1 might be your best bet!
Source: stackoverflow.com
Related Query
- How To Declare TypeScript Static Method From React Functional Component
- How to call service class method from functional component in react
- React functional component - How to access children method from Parent
- How to call a method of a functional react component from another functional react component?
- How to mock a method from a functional component in React using jest and Enzyme
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- How to declare default props in react functional component
- How to initialize the react functional component state from props
- How to extend a native's component's props TypeScript interface in a stateless, functional component in React Native?
- How should I declare a Stateless Functional Component with Typescript in React?
- How to form a TypeScript rule/config that errors if I don't return a JSX in React Functional Component
- How to properly declare type for React wrapper component (HOC) using Typescript
- How to access component method in React from a WebSocket callback
- How to pass data from vanilla JavaScript to React functional component
- How to type any param with React Typescript in Functional Component
- How to pass an external method to a stateless functional component in React
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- React/ES6 -> How to call an React component class method from another component?
- How to iterate through a list of objects from api and render it to jsx page React functional component
- How to mock a React Component static method with Jest
- How to use functions from another component in React Typescript
- How to access file from functional component in react
- How to handle asynchronous fetch from Database with Gatsby or React functional component
- How to pass props from container component to redux form(component) - react using typescript
- How to expose a 'generic' event from a custom React component in TypeScript v2.x
- When passing a React functional Component as a parameter of a function, how should I declare the function parameter type with TS
- How to access data from get request made by a React functional component to localhost server using Axios?
- How to call child component's method from a parent component in React
- How do I declare a generic React component in a const variable from a higher-order component?
- How to make a react component call a function from another Material UI Typescript
More Query from same tag
- NavLink is not rendering the child buttons as per the css styling
- How to avoid memory leaks with React Hooks
- How to update object using index value in Reactjs?
- React Router v4 Redirect unit test
- React - renderSubtreeIntoContainer: Use case example
- Add '<script>' in react component
- React this.state.bottles.map is not a function
- React component not getting rendered each time when state changed
- Good way to combine React and Leaflet
- Getting the selected value from ReactDropdown component
- how to use webpack externals for config data in react/redux app
- State variable inside a function defined within useEffect hook is not updating when value changes
- Proxying Multiple API requests with Create React App with React-Scripts version 3.4.1
- Count duplicate values from a list of objects
- Looping through Nested array
- ReactDOM does not render a simple div
- How do I use "then" with TypeScript?
- React, Redux, React-Router?
- React Native change button opacity conditionally
- Converting string date in react/javascript
- How to call the formatMessage() to load the messages from the .json files
- select one of arr index in REACT
- Conditional Statement inside Component Tag
- React chrome extension gets inserted into DOM every time the Icon of the Extension is clicked, should only be inserted once
- TS2322 Error when extending Button, component property not found. What is the correct way to type?
- ES6 computed property in react
- distinction between "() => (" and "() => {"
- Replace the current url without reloading the page
- index.js:1 Uncaught SyntaxError: Unexpected token <
- React TypeScript 16.8 How to set state from a form input