javascript - 调用 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());
}