我刚刚做出反应并为自己尝试.经过几个小时的配置webpack只是为了在我的屏幕上获得一个问候世界,我想我现在可以开始了,但是在尝试从文件中渲染另一个组件后,下一个问题.
我的主文件是app.js,它呈现了一切:
import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
Run Code Online (Sandbox Code Playgroud)
Hello组件来自同一文件夹中的hello.js:
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
Run Code Online (Sandbox Code Playgroud)
当我在没有导入/导出的app.js中做所有事情时,它呈现得很好.它编译也很好.但是现在控制台中存在很多错误.那我错过了什么?
谢谢
格尔德
我正在使用Angular JS和UI-Routing.路由工作正常.我的问题是根据用户所在的页面显示和隐藏滑块.
我的index.html看起来像这样:
<body ng-app="myApp">
<header ng-include="'templates/header.html'"></header>
<div>Code for slider</div>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
</div><!--/container-->
<!-- End Content Part -->
<footer ng-include="'templates/footer.html'"></footer>
Run Code Online (Sandbox Code Playgroud)
我的app.js看起来像这样:
angular
.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'templates/home.html'
})
.state('about',{
url: '/about',
templateUrl: 'templates/about.html'
})
.state('contact',{
url: '/contact',
template: 'CONTACT'
})
}])
.controller()
Run Code Online (Sandbox Code Playgroud)
现在我尝试在home.html模板中包含滑块,但由于初始化要求,它不能正常工作.当我在不同的路线中使用控制器时,它超出了范围.那么如何将一个引用状态的变量传递给路由器的独立控制器,这样我就可以使用它了
if (state==home) {
$scope.showSlider==true;
}else{ $scope.showSlider==false;}
Run Code Online (Sandbox Code Playgroud)
谢谢,
格尔德
更新:@Chris T.
我已将此添加到我的app.js:
.controller('myController',['$scope', '$state', function($scope,$state){
if ($state.includes('home')){
$scope.showIt=true;
}else{
$scope.showIt=false;
}
}]) …Run Code Online (Sandbox Code Playgroud) javascript jquery angularjs angularjs-scope angular-ui-router
我已经通过CSS文件在body部分实现了一个背景图像,并且它工作正常.但是,我需要根据用户点击的标签更改此图像.
现在我认为这很简单,在阅读并尝试了许多帖子中的解决方案后,我无法弄清楚哪里出错了.
所以基本上我的主要设置是:
CSS:
body {
background-image: url(/bg04.png);
}
Run Code Online (Sandbox Code Playgroud)
这可以显示背景图像.
现在我尝试在代码中更改整个场景的bg图像,当有人点击标签时:
var activate_doodle = function(e) {
if (e) {
e.preventDefault();
}
$("#text_input_container").css("display", "none");
$("#doodle_input_container").css("display", "block");
$("#change_keyboard").removeClass("active");
$("#change_doodle").addClass("active");
document.getElementById("colorPicker").click();
$('body').css('background-imgage','url(http://example.com/bg04-2.png');
};
Run Code Online (Sandbox Code Playgroud)
但它不会改变图像.我尝试将绝对URL复制并粘贴到我的浏览器中,并且pic的路径是正确的.
我也尝试将它从我的CSS中取出,将整个内容放入我的初始化JS序列中,然后在click事件中使用相同的行.
我真的很感谢你的帮助.
谢谢.