构建服务器端react应用程序,并且在使用Webpack时,Style-Loader出现问题。
我正在使用版本“ ^ 0.23.1”,并且在运行脚本进行捆绑和构建时,Style-Loader出现了问题。
问题是 window is not defined
webpack:///./node_modules/style-loader/lib/addStyles.js?:23
return window && document && document.all && !window.atob;
Run Code Online (Sandbox Code Playgroud)
有没有人遇到这个问题?在查看了有关样式加载程序的Stack和Github问题之后,我没有找到任何解决方案。
这是我的webpack文件:
const path = require('path');
const webpack = require('webpack');
module.exports = {
// webpack to use node
target: 'node',
entry: './src/index.js',
output: {
filename: 'client-build.js',
path: path.resolve(__dirname, 'build/public'),
publicPath: '/build/public'
},
module: {
rules: [
{
test: /\.js$|\.jsx$/,
loader: 'babel-loader',
exclude: '/node_modules/',
options: {
presets: [
'@babel/preset-react'
]
}
},
{
test: /\.(s*)css$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.jpeg$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.jpg$|\.pdf$/, …Run Code Online (Sandbox Code Playgroud) 我正在尝试根据搜索栏文本搜索平面列表.我遇到的问题是,当用户输入错误时...说他们想输入"汉堡"但是错误地键入"burget"然后它不会返回任何内容.当用户删除"t"时,它应该再次重新呈现平面列表,最后一个文本与"burge"部分匹配.
注意:使用react-native-elements搜索栏,它允许我用e或event调用文本.
到目前为止我在Main.js文件中有什么:
searchText = (e) => {
let text = e.toLowerCase();
let trucks = this.state.data;
// search by food truck name
let filteredName = trucks.filter((truck) => {
return truck.name.toLowerCase().match(text);
});
// if no match and text is empty
if(!text || text === '') {
console.log('change state');
this.setState({
data: initial
});
}
// if no name matches to text output
else if(!Array.isArray(filteredName) && !filteredName.length) {
console.log("not name");
this.setState({
data: [],
});
}
// if name matches then display
else if(Array.isArray(filteredName)) …Run Code Online (Sandbox Code Playgroud) 我在使用表单时遇到问题,autocomplete="current-password"其中表单未显示当前密码。密码保存在 Chrome 中。被input包裹在一个form. autocomplete="current-password"有人因不为他们工作而遇到问题吗?
这是我对 React 的输入:
<input
type={this.state.visible ? `text` : `password`}
onChange={(e) => this.props.onChange('password', e.target.value)}
autoComplete="current-password"
placeholder="password"
/>
Run Code Online (Sandbox Code Playgroud)
我没有看到任何提及此不起作用的内容或任何人提到此不起作用。
注意:autoComplete在 React 中必须这样拼写,因为 React 无法识别属性 as但会在asautocomplete上渲染DOMautocomplete
以下是元素在 上的渲染方式DOM:
<form class="sign-in">
<div class="input-group">
<label>Email</label>
<input type="email" placeholder="achroma@gmail.com" autocomplete="username" name="email" value="">
</div>
<div class="input-group">
<div class="password-top">
<label>Password</label>
<span class="password-toggle">show password</span>
</div>
<input type="password" autocomplete="current-password" placeholder="password">
<span class="forgot-password">Forgot Password?</span>
</div>
</form>
Run Code Online (Sandbox Code Playgroud) 我正在使用react-native-maps并使用react-native api进行地理定位.当我通过api使用位置时,在模拟器上返回的信息显示我在旧金山不在我所在的丹佛科罗拉多州.有没有理由为什么我的位置不会显示我在哪里?
我运行该位置的功能
// Get current users locaiton on load
componentDidMount() {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position);
let newLat = parseFloat(position.coords.latitude);
console.log("newLat", newLat);
let newLng = parseFloat(position.coords.longitude);
console.log("newLng", newLng);
// set region of user to lat and long position
// deltas set distance from marker (zoom) on map
this.setState({
region: {
latitude: newLat,
longitude: newLng,
latitudeDelta: 0.0250,
longitudeDelta: 0.0125
},
error: null
});
console.log(this.state);
},
// if error set state with error
(err) => {
console.log(err),
// set location accuracy on …Run Code Online (Sandbox Code Playgroud) 所以我正在尝试构建一个自定义管道来对ngFor循环中的多个值进行搜索过滤.我已经花了好几个小时才找到一个好的工作示例,其中大多数是基于以前的版本,似乎没有用.所以我正在构建Pipe并使用控制台为我提供值.但是,我似乎无法显示输入文本.
以下是我以前寻找工作示例的地方:
http://jilles.me/ng-filter-in-angular2-pipes/
https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview
https://www.youtube.com/results?search_query=filter+search+angular+2
https://www.youtube.com/watch?v=UgMhQpkjCFg
这是我目前的代码:
component.html
<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter>
<div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
<input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
<label for="{{lock.ID}}" class="check-label"></label>
<h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3>
<h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3>
<h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3>
<h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3>
</div>
Run Code Online (Sandbox Code Playgroud)
pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'LockFilter'
})
export class LockFilterPipe implements PipeTransform {
transform(locked: any, query: string): any { …Run Code Online (Sandbox Code Playgroud) 所以我试图在 Angular 中从数组中执行 POST 请求。基本上,当用户选择列表中的多个项目时,他们可以“解锁”每个项目。所以我遇到的问题是如何使用 forEach 进行 POST。我能够使用 forLoop 执行 POST,但问题是当它执行一个 POST 时,它不会执行另一个。有人可以指出我做错了什么,或者是否有更好的解决方案来解决这个问题?
以下是我查看的其他堆栈问题以找到可能的解决方案:
组件.ts
locked: Array<any> = [];
// Unlock
unlock() {
let observer = {
next(data) {
data => console.log(data)
},
error(error) {
return new Error('Post Error');
},
complete() {
console.log("Completed");
// window.location.reload();
}
}
// On unlock send lock data to Service for POST
this.http.postUnlock(this.unlocked).subscribe(observer);
}
Run Code Online (Sandbox Code Playgroud)
服务.ts
// POST to UNLOCK RESOURCES
postUnlock(locked) {
let headers = new …Run Code Online (Sandbox Code Playgroud) javascript ×3
reactjs ×3
angular ×2
react-native ×2
angular-pipe ×1
apple-maps ×1
autocomplete ×1
foreach ×1
html ×1
http-post ×1
ios ×1
rxjs ×1
typescript ×1
webpack ×1