React Subcomponents – وبلاگ ماکسیم هکل

1
class MyArticleView extends React.Component {
5
      div className={css.mainContainer}>
6
        div className={css.wrapper}>
7
          div className={css.titleContainer}>
8
            div className={css.title}>
9
              span>{this.renderTitle()}/span>
11
            div className={css.subtitle}>
12
              div className={css.subtitleBox}> {this.renderSubtitle()}/div>
15
          ul className={css.articlemetadata}>
16
            li className={css.item}>{this.renderAuthor()}/li>
17
            li className={css.item}>{this.renderDate()}/li>
20
        div className={css.contentArticle}>
21
          div className={css.contentTextStyle}>{this.renderMainContent()}/div>
22
          span className={css.inlineComments}>{this.renderComments()}/span>

1
class MyArticleView extends React.Component {
6
        Article.Title>{this.renderTitle()}/Article.Title>
7
        Article.Subtitle>{this.renderSubtitle()}/Article.Subtitle>
12
        Article.Content>{this.renderContent()}/Article.Content>
13
        Article.Comments>{this.renderComments}/Article.Comments>

1
import React from 'react';
2
const findByType = (children, component) => {
5
  const type = [component.displayName] || [component.name];
7
  React.Children.forEach(children, (child) => {
9
      child && child.type && (child.type.displayName || child.type.name);
10
    if (type.includes(childType)) {
17
export default findByType;

1
import React, { Component } from 'react';
2
import findByType from './findByType';
3
import css from './somestyle.css';
5
const Title = () => null;
6
class Article extends Component {
9
    const { children } = this.props;
11
    const title = findByType(children, Title);
17
    return div className={css.title}>{title.props.children}/div>;
21
      div className={css.mainContainer}>
22
        div className={css.wrapper}>
23
          div className={css.titleContainer}>{this.renderTitle()}/div>
31
export default Article;

2
  Article.Title>My Article Title/Article.Title>

2
import React, { Component } from 'react';
3
import type { Node } from 'react';
4
import findByType from './findByType';
5
import css from './styles.css';
7
const Title = () => null;
8
const Subtitle = () => null;
9
const Metadata = () => null;
10
const Content = () => null;
11
const Comments = () => null;
18
class Article extends ComponentProps> {
19
  static Title: Function;
20
  static Subtitle: Function;
21
  static Metadata: Function;
22
  static Content: Function;
23
  static Comments: Function;
26
    const { children } = this.props;
27
    const title = findByType(children, Title);
31
    return div className={css.title}>{title.props.children}/div>;
35
    const { children } = this.props;
36
    const subtitle = findByType(children, Subtitle);
41
      div className={css.subtitle}>
42
        div className={css.subtitleBox}>{subtitle}/div>
48
    const { children } = this.props;
49
    const metadata = findByType(children, Metadata);
56
      ul className={css.articlemetadata}>
57
        {metadata.props.children.map((child) => {
58
          return li className={css.item}>{child}/li>;
64
  renderContentAndComment() {
65
    const { children } = this.props;
66
    const content = findByType(children, Content);
67
    const comments = findByType(children, Comment);
74
      div className={css.contentArticle}>
75
        div className={css.contentTextStyle}>{content.props.children}/div>
76
        span className={css.inlineComments}>
77
          {comments && comments.props.children}
84
    const { children, className, ...rest } = this.props;
87
      div className={css.mainContainer}>
88
        div className={css.wrapper}>
89
          div className={css.titleContainer}>
91
            {this.renderSubtitle()}
93
          {this.renderMetadata()}
94
          {this.renderContentAndComment()}
101
Article.Title = Title;
102
Article.Subtitle = Subtitle;
103
Article.Metadata = Metadata;
104
Article.Content = Content;
105
Article.Comments = Comments;
107
export default Article;

1
import React from 'react';
2
import { mount } from 'enzyme';
3
import Article from '../';
6
const Content = () => div>[Mock] Content/div>;
7
const Subtitle = () => div>[Mock] Subtitle/div>;
8
const Comments = () => div>[Mock] Comments/div>;
9
const Metadata = () => div>[Mock] Metadata/div>;
10
const Title = () => div>[Mock] Title/div>;
11
const Subtitles = () => div>[Mock] Subtitles/div>;
13
it('Renders with all the sub-components', () => {
15
  const component = mount(
35
  expect(component).toMatchSnapshot();
38
it('Renders with only the Content and Comments', () => {
40
  const component = mount(
50
  expect(component).toMatchSnapshot();
53
it('Renders with a Title and without a subtitle', () => {
54
  const component = mount(
70
  expect(component).toMatchSnapshot();

3
const Title = () => null;
4
Title.displayName = 'Title';
6
const Subtitle = () => null;
7
Subtitle.displayName = 'Subtitle';
9
const Metadata = () => null;
10
Metadata.displayName = 'Metadata';
12
const Content = () => null;
13
Content.displayName = 'Content';
15
const Comments = () => null;
16
Comments.displayName = 'Comments';