陣營組件變化從一種類型到另

Question

我現在有一個陣營組成部分......下面的代碼：

import React, { PropTypes } from 'react'; 

export default class Message extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 

    const { type } = this.props; 

    if (type === 'success') { 
     return (<div>{this.props.msg}</div>); 
    } 
    } 
} 

我需要將其更改爲這種類型的組件：

const Message = props => (
    //Stuff here 
); 


export default Message 

我怎樣才能做到這一點？

Answer 1

如果我沒錯，你只是想創建一個無狀態版本的初始組件。要做到這一點，你把你的lambda函數當作你的渲染函數。例如：

const Message = ({ type, msg }) => (type === 'success') ? <div>{msg}</div> : null 

如果你不舒服ternarys，這是同樣的事情上面（也與解構）：

const Message = props => { 
    const { type, msg } = props 
    if(type === 'success'){ 
     return <div>{msg}</div> 
    }else{ 
     return null; 
    } 
} 

Answer 2

功能組件基本上是類組件的簡寫，僅定義了render方法。函數的主體基本上是render函數的主體。

const Message = props => { 
    const { type, msg } = props; 

    if (type === 'success') { 
     return (<div>{msg}</div>); 
    }else{ 
     return null; 
    } // :) 
};