reactjs - react.js 中 ReactDOM.render 方法和组件渲染方法的区别
问题描述
我对文档中的这一点感到困惑。类组件已经得到了 render() 并返回。为什么在最后一行代码中,又出现了一个 ReactDom.render?
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
解决方案
组件渲染
返回一组用于创建 DOM 的指令。
ReactDom.render 方法
render 方法可以称为 React 和 DOM 之间的主要网关。它用于将我们的 React 代码注入 DOM。
检查这篇文章。
推荐阅读
- python - 编译的 Python 脚本不起作用
- c - 使用 C 获取文本文件中两个特定点之间的特定信息
- php - 我如何在另一个区域内使用带有变量名的 php 变量,就好像我自己键入变量名一样?
- python - “从 xy 导入 z”和“将 xyz 导入为 z”之间的区别
- angular - 如何让 Angular 5 在构造依赖项或 ngOnInit 之前等待 Injectable 构造函数中使用的 Promise 解析?
- c - 将两个字符连接成每个索引中的字符数组
- android - 从 Inkscape 导入的 SVG 未呈现
- python - 将文件夹从 Google Colab 移动到 Google Drive
- xamarin.forms - 使用自定义渲染器时是否也应该渲染 ContentPage 的子级?
- r - R ggplot2 & gganimate:动画最后的变化