You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
700 B
24 lines
700 B
7 years ago
|
# Rendering from string
|
||
|
|
|
||
|
|
If for any reason you don't want to use JSX, you can render component from string or template tag.
|
||
|
|
|
||
|
|
Rendering from string is extremely simple. The syntax is very similar to
|
||
|
|
[stateless components](/#stateless-components), but instead of returning JSX your function should
|
||
|
|
return a string:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const SuperHeader = ({ text }) => `
|
||
|
|
<div>
|
||
|
|
<h1>${text}</h1>
|
||
|
|
<h3>It's Superpowered!</h3>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
```
|
||
|
|
|
||
|
|
Your component function will have the `props` argument that you can use for interpolation (i.e. via
|
||
|
|
ES6 template string).
|
||
|
|
|
||
|
|
_Note that string render doesn't support state and lifecycle methods._
|
||
|
|
|
||
|
|
**_Next: [Render from template tag →](./3_TEMPLATE_RENDER.html)_**
|