Question

我有一个反应组件，显示一条消息：

以下是代码：

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

调用React组件以显示为警报功能

1 个答案: