feat(guide): add an example of custom component
This commit is contained in:
@ -0,0 +1,80 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { graphql } from 'gatsby';
|
||||||
|
|
||||||
|
import ArticleLayout from '../../ArticleLayout';
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
data: PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
|
class CustomClickCounter extends React.Component {
|
||||||
|
state = {
|
||||||
|
init: false,
|
||||||
|
span: null,
|
||||||
|
div: null,
|
||||||
|
counter: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
initComponent() {
|
||||||
|
const span = document.getElementById('example-component_span');
|
||||||
|
const div = document.getElementById('example-component_div');
|
||||||
|
this.setState({ init: true, span, div });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClick = () => {
|
||||||
|
this.setState(state => ({ counter: state.counter + 1 }));
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.initComponent();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (!this.state.init) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ReactDOM.createPortal(this.state.counter, this.state.span)}
|
||||||
|
{ReactDOM.createPortal(
|
||||||
|
<button onClick={this.handleClick}>Click me!</button>,
|
||||||
|
this.state.div
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ExampleComponent = props => {
|
||||||
|
const {
|
||||||
|
data: {
|
||||||
|
markdownRemark: { html }
|
||||||
|
}
|
||||||
|
} = props;
|
||||||
|
return (
|
||||||
|
<ArticleLayout {...props}>
|
||||||
|
<article
|
||||||
|
className='article'
|
||||||
|
dangerouslySetInnerHTML={{ __html: html }}
|
||||||
|
id='article'
|
||||||
|
tabIndex='-1'
|
||||||
|
/>
|
||||||
|
<CustomClickCounter />
|
||||||
|
</ArticleLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ExampleComponent.displayName = 'ExampleComponent';
|
||||||
|
ExampleComponent.propTypes = propTypes;
|
||||||
|
export default ExampleComponent;
|
||||||
|
|
||||||
|
export const pageQuery = graphql`
|
||||||
|
query ExampleComponent($id: String!) {
|
||||||
|
markdownRemark(id: { eq: $id }) {
|
||||||
|
html
|
||||||
|
...ArticleLayout
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
8
mock-guide/english/components/example/index.md
Normal file
8
mock-guide/english/components/example/index.md
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Example component
|
||||||
|
component: example/Component/index.js
|
||||||
|
---
|
||||||
|
## Example component
|
||||||
|
|
||||||
|
We can place inline component: <span id='example-component_span'></span>.
|
||||||
|
Or place block component: <div id='example-component_div'></div>
|
14
mock-guide/english/components/index.md
Normal file
14
mock-guide/english/components/index.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
title: Components
|
||||||
|
---
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
We can use custom components for guide articles. Add
|
||||||
|
|
||||||
|
```yml
|
||||||
|
component: path/to/component
|
||||||
|
```
|
||||||
|
|
||||||
|
to an article frontmatter to use your component. Your component should be
|
||||||
|
located in `client/src/templates/Guide/components/path/to/component`.
|
Reference in New Issue
Block a user