1 | import { Component, ComponentType, ReactNode } from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | /**
|
4 | ---
|
5 | category: utilities/react
|
6 | ---
|
7 | Abstract component identifier. Helpful for picking out a specific child.
|
8 |
|
9 | ```js
|
10 | class App extends Component {
|
11 | render () {
|
12 | const title = pick(Title, this.props.children)
|
13 | const content = pick(Content, this.props.children)
|
14 |
|
15 | return (
|
16 | <div>
|
17 | {title}
|
18 | <ContextView>
|
19 | {content}
|
20 | </ContextView>
|
21 | </div>
|
22 | )
|
23 | }
|
24 | }
|
25 |
|
26 | class Title extends ComponentIdentifier { static displayName = 'Title' }
|
27 | class Content extends ComponentIdentifier { static displayName = 'Content' }
|
28 |
|
29 | ReactDOM.render(
|
30 | <App>
|
31 | <Title><h2>Hello World!</h2></Title>
|
32 | <Content><div>This text gets decorated within `App`.</div></Content>
|
33 | </App>,
|
34 | document.getElementById('container')
|
35 | )
|
36 | ```
|
37 | @module ComponentIdentifier
|
38 | **/
|
39 | declare class ComponentIdentifier<P> extends Component<P> {
|
40 | static propTypes: {
|
41 | children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
42 | };
|
43 | static defaultProps: {
|
44 | children: null;
|
45 | };
|
46 | static pick: (component: ComponentType, children: ReactNode) => undefined;
|
47 | render(): JSX.Element | null;
|
48 | }
|
49 | export default ComponentIdentifier;
|
50 | export {
|
51 | /**
|
52 | *
|
53 | * Pick a specific child component from a component's children
|
54 | *
|
55 | * @param {Component} component The component to look for
|
56 | * @param {Array} children The child components to look through
|
57 | * @return {Component} The matching component if found, otherwise undefined
|
58 | */
|
59 | ComponentIdentifier };
|
60 | //# sourceMappingURL=ComponentIdentifier.d.ts.map |
\ | No newline at end of file |