This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
// This creates the "Article Context" i.e. an object containing a Provider and a Consumer component | |
const ArticleContext = React.createContext(); | |
// This is the Title sub-component, which is a consumer of the Article Context | |
const Title = () => { | |
return ( | |
<ArticleContext.Consumer> | |
{({ title, subtitle }) => ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import Article, { Title } from "./Article"; | |
class App extends Component { | |
constructor() { | |
this.state = { | |
value: { | |
title: <h1>React sub-components with</h1>, | |
subtitle: ( | |
<div>Lets make simpler and more flexible React components</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import Article from "./Article"; | |
class App extends Component { | |
constructor() { | |
this.state = { | |
value: { | |
title: <h1>React sub-components with</h1>, | |
subtitle: ( | |
<div>Lets make simpler and more flexible React components</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
// This creates the "Article Context" i.e. an object containing a Provider and a Consumer component | |
const ArticleContext = React.createContext(); | |
// This is the Title sub-component, which is a consumer of the Article Context | |
const Title = () => { | |
return ( | |
<ArticleContext.Consumer> | |
{({ title, subtitle }) => ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
const ArticleContext = React.createContext(); | |
const OtherContext = React.createContext(); | |
const OutOfContextComponent = OtherContext.Provider; | |
const Article = ArticleContext.Provider; | |
const View = ArticleContext.Consumer; | |
const Title = () => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
const Title = () => null; | |
Title.displayName = 'Title'; | |
const Subtitle = () => null; | |
Subtitle.displayName = 'Subtitle'; | |
const Metadata = () => null; | |
Metadata.displayName = 'Metadata'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { mount } from 'enzyme'; | |
import Article from '../'; | |
// First we declare some mocks | |
const Content = () => <div>[Mock] Content</div>; | |
const Subtitle = () => <div>[Mock] Subtitle</div>; | |
const Comments = () => <div>[Mock] Comments</div>; | |
const Metadata = () => <div>[Mock] Metadata</div>; | |
const Title = () => <div>[Mock] Title</div>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
import React, { Component } from 'react'; | |
import type { Node } from 'react'; | |
import findByType from './findByType'; | |
import css from './styles.css'; | |
const Title = () => null; | |
const Subtitle = () => null; | |
const Metadata = () => null; | |
const Content = () => null; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Article> | |
<Article.Title> | |
My Article Title | |
</Article.Title> | |
</Article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import findByType from './findByType'; | |
import css from './somestyle.css'; | |
// We instantiate the Title sub-component | |
const Title = () => null; | |
class Article extends Component { | |
// This is the function that will take care of rendering our Title sub-component | |
renderTitle() { | |
const { children } = this.props; | |
// First we try to find the Title sub-component among the children of Article |