Javascript 将组件从一种类型更改为另一种类型

我目前有一个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>);
    }  
  }
}

---

如何实现这一点？

函数组件基本上是类组件的简写，只定义了

render

方法。函数体基本上就是

render

函数体

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

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

const Message=props=>{
const{type，msg}=props；
如果（类型=='success'）{
返回（{msg}）；
}否则{
返回null；
}  // :)
};

如果我是正确的，您只需要创建初始组件的无状态版本。为此，将lambda函数视为渲染函数。例如：

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

const Message=（{type，msg}）=>（type=='success'）？{msg}：空

如果您对Ternary感到不舒服，这与上述内容相同（同样适用于解构）：

const Message=props=>{
const{type，msg}=props
如果（类型=='success'）{
返回{msg}
}否则{
返回null；
}
}

用

const Message=props=>props.type=='success'替换
const Message…
？{props.msg}:null获取：错误：消息（…）：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象。很抱歉，在第二个示例中忘记了其他对象。获取：错误：消息（…）：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象。
const Message = ({ type, msg }) => (type === 'success') ? <div>{msg}</div> : null

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