小编Roy*_*ers的帖子

React-Image-Gallery 导致错误行为

react-image-gallery我一直在尝试从这个 npm 包中实现。

虽然我可以获得一些滑动图像来工作,但每当我快速单击下一个箭头按钮时,它就会以类似越野车的行为弹出到屏幕顶部:

在此输入图像描述

我尝试减少 CSS 文件中的过渡时间,但还是发生了同样的问题。我做错了什么以及如何让这个轮播像示例中那样实现一致的平滑过渡?

我安装了该软件包,然后按照建议将其包含在内:

import ImageGallery from 'react-image-gallery';
import React from 'react'
import '../node_modules/react-image-gallery/styles/css/image-gallery.css';

class App extends React.Component {
  render() {
    const images = [
      {
        original: 'http://lorempixel.com/1000/600/nature/1/',
        thumbnail: 'http://lorempixel.com/250/150/nature/1/',
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/2/',
        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/3/',
        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
      }
    ]
    return (
      <ImageGallery items={images} />
    );
  }
}
export default App;
Run Code Online (Sandbox Code Playgroud)

javascript css carousel npm reactjs

5
推荐指数
0
解决办法
1797
查看次数

从序列查询中排除主键属性

我有一个从多个内部连接在一起的表的查询查询。我需要在嵌套include模型上对它们进行分组,但是即使我将属性提到为,sequelize查询每次也会抛出主键attributes:[]

但是attributes:[]适用于嵌套include模型。

mysql node.js sequelize.js

5
推荐指数
2
解决办法
4440
查看次数

使用 React 调用 API 的最佳实践是什么

实际上,在调用 API 时,我在 React 中遇到了一个小问题,因为ComponentWillMount已弃用。

我这样做了:

class MyClass extends Component {
  constructor() {
  super();

    this.state = {
      questionsAnswers: [[{ answers: [{ text: '', id: 0 }], title: '', id: 0 }]],

    },
  };
}
componentDidMount() {
   this.getQuestions();
}

getQuestions = async () => {
   let questionsAnswers = await Subscription.getQuestionsAndAnswers();
   questionsAnswers = questionsAnswers.data;
   this.setState({ questionsAnswers });
};
Run Code Online (Sandbox Code Playgroud)

因此,页面第一次渲染时没有questionsAsnwers,当我得到页面时,questionAnswers页面被重新渲染

有没有更好的解决方案来避免重新渲染?

javascript api reactjs

5
推荐指数
1
解决办法
1万
查看次数

图表js如何用颜色填充图例框

我正在使用Chart.js作为折线图,我的传说如下. 图表图例

问题是图例只有轮廓颜色,我希望图例框中的整个颜色都是彩色的.我没有在文档中找到任何东西,看看为什么我的只有边框.我有点不知所措,这是我的设置示例:

var LinuxDistributionsCombined = document.getElementById('LinuxDistributionsCombined');
var myChart = new Chart.Line(LinuxDistributionsCombined, {
  type: 'line',
  data: {
    labels: ['Jul-2016', 'Sep-2016', 'Oct-2016', 'Dec-2016', 'Jan-2017', 'Feb-2017', 'Mar-2017', 'Apr-2017', 'May-2017', 'Jun-2017', 'Jul-2017', 'Aug-2017', 'Sep-2017', 'Oct-2017'],
    datasets: [{
      label: 'Ubuntu-based',
      fill: true,
      data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
      borderColor: '#a6cee3',
      borderWidth: 1
    }, {
      label: 'Arch-based',
      fill: true,
      data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
      borderColor: …
Run Code Online (Sandbox Code Playgroud)

javascript chart.js

4
推荐指数
1
解决办法
6392
查看次数

Angular/Firestore - 在AngularFirestoreCollection类型上不存在'where'查询返回错误'属性'

我正在尝试根据传递给参数的URL参数从firestore集合中获取特定文档,但是当我使用初始化集合时expensesCollection: AngularFirestoreCollection<Expense>,where查询返回以下错误:

TS2339:类型'AngularFirestoreCollection上不存在属性'where'

单击"ExpensesList"组件上的数据表行后,将访问"ViewExpense"组件,该组件将费用ID作为参数传递,该参数在where查询中使用.

-

费用-list.component.html:

<mat-row *matRowDef="let row; columns: tableColumns" routerLink="/expenses/view/{{row.expenseId}}"></mat-row>
Run Code Online (Sandbox Code Playgroud)

-

视图expense.component.ts:

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase } from 'angularfire2/database';

import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

import { Expense } from '../expenseModel';

@Component({
  selector: 'app-view-expense',
  templateUrl: './view-expense.component.html',
  styleUrls: ['./view-expense.component.scss']
})

export class ViewExpenseComponent implements OnInit {

  expenseId: any;

  expensesCollection: AngularFirestoreCollection<Expense>;
  expenses: Observable<Expense[]>;

  expense: Observable<Expense>;

  constructor(private …
Run Code Online (Sandbox Code Playgroud)

javascript firebase firebase-realtime-database angular google-cloud-firestore

4
推荐指数
1
解决办法
6540
查看次数

如何获取我的应用程序 APK 的 URL?(Google Play Protect 上诉)

我需要向 Google Play Protect 发送一些信息,因为虽然我的应用程序在 Google Play 商店中运行良好,但对于从三星 App Store 下载它的人来说却出现了错误。

问题之一是下载我的 APK 的 URL。我只将生成的已签名 APK 上传到应用商店。我从未使用过 URL,所以我如何为我的应用程序获取该 URL,以便我可以为 Google Play Protect 团队填写这个问题。

截屏:

在此处输入图片说明

android google-play android-studio

4
推荐指数
1
解决办法
5321
查看次数

如何从 owl-carousel 2 中删除项目?

如何从猫头鹰轮播库中删除项目?

这是我的 html 标记:

<div class="owl-carousel owl-theme">
    <img src="/assets/storage/gallery/1.jpg"></div>
    <img src="/assets/storage/gallery/2.jpg"></div>
    <img src="/assets/storage/gallery/3.jpg"></div>
    <img src="/assets/storage/gallery/4.jpg"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是我的 JavaScript:

$(".owl-carousel").owlCarousel({
  items: 1,
  margin: 10,
  rtl: true,
  autoHeight: true,
  lazyLoad: true
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery owl-carousel

3
推荐指数
1
解决办法
1万
查看次数

在 Reactstrap 中更改卡片高度

我正在使用 Reactstrap,为了使某个卡片响应窗口的大小,我想用百分比而不是像素来修复它的纵横比。

出于某种原因,这适用于宽度但不适用于高度。 https://codepen.io/anon/pen/xpwOGL

第一行是问题。如果我将高度设置为一个常数,比如说height:"200px",它会200px很好。如果我更改宽度 %,它将更改宽度以匹配。但出于某种原因, height % 只是没有做任何事情。

<Card style={{width:"80%", height:"60%"}}> 
   <Row className="no-gutters" style={{position: "absolute"}}>
      <Col xs="auto">
        <button>
          Next image
        </button>
      </Col>
      <Col xs="auto">
        <button>
          Previous image
        </button>
      </Col>
    </Row>
 </Card>
Run Code Online (Sandbox Code Playgroud)

有没有一种不同的方式可以让我做出这种响应?

html css reactjs

3
推荐指数
1
解决办法
1万
查看次数

使对象传播以使用 webpack.config 和 babelrc 文件

我试图让对象传播运算符与我的反应项目一起工作。它出现了一个语法错误:

传播算子错误

我已经尝试babel-plugin-transform-object-rest-spread按照 babel docs 的描述使用。

经过一番研究,我还尝试了babel 的GitHub 问题中描述的配置: 扩展运算符的 babelrc 配置

请参阅下面的我的.babelrc文件:

{
    "presets": ["es2015"],
    "plugins": ["transform-object-rest-spread"],
    "sourceMaps": true,
    "retainLines": true
}
Run Code Online (Sandbox Code Playgroud)

我的webpack.config文件如下:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public', 'js'),
    publicPath: '/'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        options: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test:/\.scss$/,
        use: …
Run Code Online (Sandbox Code Playgroud)

reactjs webpack babeljs ecmascript-next

3
推荐指数
1
解决办法
2265
查看次数

React Native-导航栏中的矢量图标

在我的React Native应用中,我想使用Vector Icons作为导航栏按钮。为此,我正在使用:https : //github.com/oblador/react-native-vector-icons 导航:https : //reactnavigation.org/

我也设法设置了图标,但是当我点击按钮时,背景变成黑色,我得到了不想要的效果。有没有办法在按下按钮时也能保持背景色透明?

这是我的代码:

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state

    return {
    headerTitle: "Blog posts",
    headerRight: (            
        <Icon.Button name="quote-right" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>            
      ),
    headerLeft: (                                     
        <Icon.Button name="navicon" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>                                                                     
      ),
    };
};
Run Code Online (Sandbox Code Playgroud)

这就是我得到的:

在此处输入图片说明

react-native react-navigation react-native-vector-icons

3
推荐指数
1
解决办法
1298
查看次数