我有一个显示消息的 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 做到这一点?
最佳答案
如果 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());
}
关于javascript - 调用 React 组件以像警报功能一样显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43497626/