码迷,mamicode.com
首页 > 其他好文 > 详细

[React] Render Text Only Components in React 16

时间:2017-09-28 09:56:14      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:xtend   lin   this   session   roo   color   app   logs   nts   

In this session we create a comment component to explore how to create components that only render text.

In previous versions of we had to wrap our text in needless <span> or <div>, we will see how React 16 removes the unneeded structure.

 

import React, { Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;

const Comment = ({ text }) => {
  const emojifiedText = text
    .replace(‘:)‘, ‘??‘)
    .replace(‘:D‘, ‘??‘)
    .replace(‘:(‘, ‘??‘);
  return emojifiedText;
};

class App extends React.Component {
  render() {
    return (
      <div>
        <Comment text="Today we are sailing home :)" />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById(‘root‘));

 

[React] Render Text Only Components in React 16

标签:xtend   lin   this   session   roo   color   app   logs   nts   

原文地址:http://www.cnblogs.com/Answer1215/p/7604753.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!