Reagieren Komponentenwechsel von einem Typ zum anderen

Question

ich eine Komponente Reagieren Sie haben derzeit ... Hier ist der Code:

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>); 
    } 
    } 
} 

Ich brauche es für diese Art der Komponente zu ändern:

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


export default Message 

Wie kann ich das machen?

Answer 1

Wenn ich richtig liege, möchten Sie einfach eine zustandslose Version Ihrer ursprünglichen Komponente erstellen. Um dies zu tun, behandeln Sie Ihre Lambda-Funktion als Render-Funktion. Zum Beispiel:

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

Wenn Sie sich nicht wohl mit ternarys sind, dann ist dies das gleiche wie oben (auch mit Dekonstruktion):

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

Answer 2

Funktionskomponenten sind grundsätzlich eine Abkürzung für eine Klassenkomponente mit nur der render-Methode definiert. Der Körper der Funktion ist im Grunde der Körper der render Funktion.

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

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