调用React组件以像警报功能一样出现

Question

我有一个react组件，显示一个消息：

这是代码：

import React, { PropTypes } from 'react';
const Message = props => {
  const { type, msg } = props;
  if (type === 'success') {
    return (<div>{msg}</div>);
  } else {
    return null;
  }
};
Message.PropTypes = {
  type: PropTypes.string.isRequired,
  msg: PropTypes.string.isRequired,
};
export default Message;

//此组件从index.js：

称为此组件

<Message type="success" msg="This is a Message" />

我的问题是...我该如何称呼组件，就像我称之为函数一样。

例如：

if (function is success then) {
  //Show the Message Component
}

我该如何使用React？

Answer 1

如果if子句在另一个React组件中，您只是渲染它，

class AnotherReact extends Component {
    render() {
        let alert = success ? <Message /> else '';
        return (<div>{ alert }</div>);   
    }
}

否则，如果不在React组件中，则必须使用ReactDOM.render()。

if (is success) {
    ReactDOM.render(<Message />, document.querySelector());
}