Question

我目前有一个React组件......这是代码：

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

React组件从一种类型更改为另一种类型

2 个答案: