import React from 'react' import ReactDOM from 'react-dom' import App from './components/app' // import Context from './context/context' // ReactDOM.render(<Context/>,document.getElementById('root')); //播放器 //声明一个全局状态 let appState = { isPlaying:false, screen:{ title:'java is easy' }, button:{ text:'播放' } }; const renderScreen = (screen)=>{ //获取页面元素 const sc = document.querySelector('#screen'); //对页面元素进行修改 sc.innerHTML = `${screen.title}:${appState.isPlaying}`; }; const renderButton = (button)=>{ //获取页面元素 const btn = document.querySelector('#button'); //对页面元素进行修改 btn.innerHTML = button.text; }; //全局渲染方法 const renderApp = (state)=>{ //渲染屏幕 renderScreen(state.screen); //渲染按钮 renderButton(state.button); }; //全局初始化 renderApp(appState); //对按钮进行监听 document.querySelector("#button").addEventListener('click',()=>{ //判断播放状态 if(!appState.isPlaying){ //修改播放状态 appState.isPlaying = true; //修改按钮 appState.button = { text:'停止' } }else { //修改播放状态 appState.isPlaying = false; //修改按钮 appState.button = { text:'播放' } } //重新渲染 renderApp(appState); }); // ReactDOM.render(<App/>,document.getElementById('root'));
Redux自定义渲染页面
最新推荐文章于 2024-01-04 18:14:44 发布