javascript - ReactJS 不是渲染组件
问题描述
我从这个例子中得到了这一切。创建一个 React 登录页面
所以我不能接受任何功劳。但是,此页面工作正常。我正在尝试对其进行改造以推动 React Video Player 页面。
我的代码如下(来自 Axios Post 的片段):
if (response.status == 200) {
console.log("Login successfull");
var videoPlayer = [];
this.setState( {isLoggedIn : true });
videoPlayer.push(<Videoplayer appContext={self.props.appContext} parentContext={this} />);
self.props.appContext.setState({loginPage: [], videoPlayer: videoPlayer});
现有的代码是这样的:
var uploadScreen=[];
uploadScreen.push(<UploadScreen appContext={self.props.appContext}/>);
self.props.appContext.setState({loginPage: [], uploadScreen: uploadScreen})
render() {
var browserHistory = createBrowserHistory();
if(this.state.isAuthenticated) {
return <Redirect to={'/VideoPlayer '}/>
}
return(
//<Router history={ browserHistory }>
//<Route path="/VideoPlayer" component={() => <VideoPlayer title="Arlo Video" style="home-header"/> }/>
<div>
<MuiThemeProvider>
<div>
<AppBar
title="Login"
/>
<TextField
hintText="Enter your Username"
id = "username"
floatingLabelText="Username"
onChange={(event, newValue) => this.setState({username: newValue})}
/>
<br/>
<TextField
type="password"
id = "password"
hintText="Enter your Password"
floatingLabelText="Password"
onChange={(event, newValue) => this.setState({password: newValue})}
/>
<br/>
<RaisedButton label="Submit" primary={true} style={style}
onClick={(event) => this.handleClick(event)}/>
</div>
</MuiThemeProvider>
</div>
// </Router>
)
}
}
我的代码不呈现 VideoPlayer 页面,该代码来自此 github 上的标准示例
我有一种感觉,它与 Context 有关,但我对 React 或如何使用 Chrome 工具调试它知之甚少。我的后端是 Django。我几乎正在考虑重新使用 Jquery,这样我至少可以让页面正常运行,但想尝试学习 React。
任何帮助都会很棒。上面的代码只是测试代码,所以我可以得到一些功能。
解决方案
推荐阅读
- solidity - 不懂编译器
- flutter - 颤动屏幕从底部溢出并且不滚动
- python - 为什么我在 Mysql SELECT 查询期间收到此 UnicodeDecodeError?
- javascript - 如何在SVG中动态查找父元素内的文本元素?
- python - 选项卡完成以显示可用的动态创建的关联对象
- javascript - 函数在获取请求完成之前返回
- r - 有没有 [r] 符号的字典?
- mysql - 带有springboot和MySql数据库的实时flutter聊天应用
- java - 多部分文件上传:415 不支持的媒体类型
- python - 使用 Selenium 管理 Chrome 内存使用情况