小编RCo*_*hen的帖子

我有一个自定义模式，里面有 2 个 react-select 组件。如果内容超过其大小，模态主体已准备好自动滚动，但 react-select 组件下拉列表会在模态内打开并带有此溢出，这正是我不想要的。没有溢出，它工作正常。

我正在使用 CSS 模块。

<div className={styles.modalBody}>
    {this.props.children}
</div>

.modalBody {
    padding: padding;
    flex: 1 1 auto;
    height: 45vh;
    max-height: 100%;
    overflow: auto;
}

<Select
    id={this.props.id}
    className={styles[this.props.selectType ? this.props.selectType : 'selectWhite']}
    classNamePrefix="select"
    name={this.props.name}
    value={selectedOption ? selectedOption : this.props.value}
    placeholder={this.props.placeholder}
    onChange={this.onChange}
    options={this.props.options}
    isDisabled={this.props.disabled}
    isSearchable={false}/>

我怎样才能解决这个问题？谢谢！:)

我正在使用 Firebase - Cloud Firestore，目前我想对所有可用记录进行分页。我已经有了一个记录列表，剩下的是一些分页。我是 Cloud Firestore 的新手，因此我们不胜感激。

我检查了 Firestore 文档（https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query）和 ReactJS 示例，但可用的并不多。

我理解 eg: .startAt(0), .limit(10)，但问题是如何使用在 render 方法中调用的这个组件正确分页。

import React, { Component } from 'react';
import Pagination from "react-js-pagination";
import firestore from "./Firebase";

export default class DataList extends Component {

constructor(props) {
    super(props);
    this.state = {
        dbItems: [],
        currentPage: 1,
        itemsPerPage: 3,
        totalItemCount: 1,
        activePage: 15
    }
    this.handlePageChange = this.handlePageChange.bind(this);
}

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
}

async getItems() {
    const …

我有一个自定义模态组件。当它打开时，背景中没有任何滚动。

我在下面尝试了这段代码：

componentDidMount() {
    document.body.style.overflow = 'hidden';
}

componentWillUnmount() {
    document.body.style.overflow = 'unset';
}

乍看起来似乎可行，但是当我使用模式组件时，在另一页中，即使关闭了模式也没有滚动。

有更好的解决方案吗？

我的模态组件：

export class Modal extends React.Component {

constructor(props) {
    super(props);
}

componentDidMount() {
    document.body.style.overflow = 'hidden';
}

componentWillUnmount() {
    document.body.style.overflow = 'unset';
}

render() {
    return (
        <React.Fragment>
            {this.props.showAt ?
                this.props.show ?
                    <div style={style} className={`${this.props.sectionName} ${modalTypeStyle ? modalTypeStyle : styles.modalWhite} ${modalTypeSize ? modalTypeSize : styles.modalSmall} ${!this.props.showAt ? styles.modalWhiteFixed : ""}`}>
                        {this.props.arrowShape ? <div className={arrowTypeStyle ? arrowTypeStyle : styles.triangleToprightWhite} /> : null}
                        {this.props.children}
                    </div>
                    : …

目前，我的 webpack 正在捆绑我的 CSS 样式，如下所示：

//this css is going first, it's supposed to go last
.rbc-btn {
  color: red;
}
//this css must be first
.myStyle {
  color: green;
}

我想要的是按特定顺序捆绑我的 CSS 样式，如下所示：

.myStyle {
  color: green;
}
.rbc-btn {
  color: red;
}

我该如何使用 webpack 解决这个问题？

谢谢！:)

我正在编写一个命令行程序，该程序使用CSV文件中的信息来计算订单的总价。

sample.catalog.csv内部的数据：

P1,5,1000.00
P2,8,250.00
P3,15,125.00
P4,10,250.00
P5,2,2500.00

并且该程序必须从命令行使用以下参数运行：

示例：$ CalculateOrder sample.catalog.csv P1 2 P2 4

（P4 6 P10 5 P12 1是可从csv文件获得的产品和数量）

总计：4151,25

这是我目前所拥有的：

var program = require('commander');
const csv = require('csv');
const fs = require('fs');


program
    .version('1.0.0')
    .option('-l, --list [list]', 'list of order prices in sample.catalog.csv')
    .parse(process.argv)

console.log("hello world")
console.log("list of order prices", program.list);


/* 
    To read csv file and print the data to the console:
    [node orderPrice --list input/sample.catalog.csv]
*/

let parse = csv.parse;
let stream = …

I have a simple ternary operator, where I want to return null with two different strings.

this.props.sportType === 'tennis' || 'soccer' ? null : <li onClick={this.props.onClick} className={styles.menuItem}>N/A</li>

不幸的是，但这并不完全有效。我如何使用|| 正确地使用三元运算符？

谢谢！:)

我有一个需要迭代的 Map() 对象，因此我可以获得星期几和选定的小时。下面的代码不起作用，因为Object.keys(newFieldReservationPrice).forEach它试图循环一个 Map() 对象，这似乎没有意义。那么，有没有更好的解决方案呢？

这是下面的代码：

handlePriceInput = (e, hour, day) => {
let value = e.target.value

const newFieldReservationPrice = this.state.newFieldReservationPrice
console.log('newFieldReservationPrice', newFieldReservationPrice) // A Map();
let map;

if (!newFieldReservationPrice instanceof Map) {
  console.log('!== Map')
  console.log('newFieldReservationPrice is a Map()? inside if ()', newFieldReservationPrice)
  if (newFieldReservationPrice[day] && newFieldReservationPrice[day][hour]) {
      newFieldReservationPrice[day][hour] = Number(value)
  } 
} else {
  map = new Map();
  console.log('map object', Object.keys(newFieldReservationPrice)) // logs map object []

  Object.keys(newFieldReservationPrice).forEach(key => {
    console.log('key', key)
      map.set(key, new Map(Object.entries(newFieldReservationPrice[key])));
  }); // This …

我有一个简单的表单,我想在删除按钮单击时删除所选项目.我正在部分删除所需的项目,但如果我删除中间项目,它也会删除最后一项.如果我删除第一个项目,它将删除整个数组.

这里有实例

代码在这里:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: ["Saab", "Volvo", "BMW"],
      editMode: false,
      rulesTerm: ""
    };
  }

    handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(name);
    console.log(value);

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [name]: value
      }
    }));
  };

  handleFormSubmit = e => {
    e.preventDefault();

    const { data } = this.state;
    console.log(data);
  };

  removeRule = (e, index) => { …