[React] Render Text Only Components in React 16

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React] Render Text Only Components in React 16相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

react学习----react转换值同render

react学习(71)--render使用

react native render foreach循环

react.js中render的return的坑

react.js中render的return的坑

React Native(四)自定义Header和Footer组件