小编Mou*_*ror的帖子

使卡片和图像大小相同 - 如何使用 CSS 做到这一点？

我在用着react。Material-ui是为了Cards. 因为Grid我正在使用 CSS 网格布局。到目前为止，它看起来像这样：

但我的目标是这样的：

我有两个问题：

我想让所有这些都具有cards相同的高度（415px）。我尝试了 height: 415px.BeerListingScroll-info-box但它不起作用。
瓶子和小桶的图像尺寸不同 [小桶 (80 像素 x 160 像素) 与瓶子 (80 像素 x 317 像素)]。有什么办法可以让它们在渲染尺寸上更加相似吗？

代码：

BeerListingScroll

import React, { Component } from 'react';
import ReduxLazyScroll from 'redux-lazy-scroll';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBeers } from '../../actions/';

import BeersListItem from '../../components/BeersListItem';
import ProgressIndicator from '../../components/ProgressIndicator';

import './style.css';

class BeerListingScroll extends Component …

Run Code Online (Sandbox Code Playgroud)

javascript css reactjs material-ui

Mou*_*ror

lucky-day

6
推荐指数

2
解决办法

2万
查看次数

如何在代码中避免嵌套的三元表达式？

我有这样的代码.如何使用JavaScript中的函数式编程以更干净,更优雅的方式编写它？我想摆脱嵌套的三元表达式.有任何想法吗？

props => ({
            iconColor: props.isPriority ? (props.isCompleted ? variables.color.lightpurple : variables.color.purple ) : variables.color.gray3,
            iconName: props.isPriority ? 'star-full' : 'star-empty',
          }))

Run Code Online (Sandbox Code Playgroud)

这是该代码的其余部分:

编辑:

const enhance: React$HOC<*, InitialProps> = compose(
      withProps(props => ({
        iconColor: props.isPriority ? (props.isCompleted ? variables.color.lightpurple : variables.color.purple) : variables.color.gray3,
        iconName: props.isPriority ? 'star-full' : 'star-empty',
      }))
    )

Run Code Online (Sandbox Code Playgroud)

javascript functional-programming purely-functional

Mou*_*ror

2017 09-18

5
推荐指数

1
解决办法

5309
查看次数

Redux thunk - 如何防止它发出不必要的 API 请求？

我有这样的 action.js 文件：

import axios from 'axios';

export const SEARCH_TERM = 'SEARCH_TERM';
export const SAVE_SEARCH = 'SAVE_SEARCH';

export function search(query) {
  const githubApi = `https://api.github.com/search/repositories?q=${query}&sort=stars&order=desc`;
  const request = axios.get(githubApi);
  return (dispatch) => {
    request.then(({ data: dataFromGithub }) => {
      dispatch({ type: SEARCH_TERM, payload: query });
      dispatch({ type: SAVE_SEARCH, payloadOne: query, payloadTwo: dataFromGithub });
    });
  };
}

Run Code Online (Sandbox Code Playgroud)

使用减速器，我将用户输入的所有搜索词保存到 redux 中。然后我向 github api 发出请求并保存响应数据。

现在我遇到了一个问题，我真的不知道如何处理。

我如何编写代码来检查用户之前是否已经搜索过此查询，在这种情况下，我的应用程序不会向 github api 触发该请求。

我该如何做到这一点以及我应该将这个逻辑放在哪里？有任何想法吗？

编辑：感谢@klugjo！由于他的提示，我编写了确实有效的代码。

import React, { Component } from 'react';
import { connect } …

Run Code Online (Sandbox Code Playgroud)

javascript api node.js redux-thunk react-redux

Mou*_*ror

2017 12-26

5
推荐指数

1
解决办法

1997
查看次数

只要用户输入,就在React中使用Lodash debounce来防止请求数据

只要用户输入,我就不想发出请求.我的代码应该限制请求,以便当用户快速键入时,它将使用最新的输入值而不是许多输入一个请求.

现在,当我输入"test"时,它会触发4个不同的请求:

"T"
"TE"
"TES"
"测试"

所以我找到了lodash _.debounce和_.throttle([ https://lodash.com/docs/4.17.4#debounce])但是我真的不明白如何将它添加到我的代码中.谁能帮我？

我的代码:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import './style.css';

import { search } from '../../actions/';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: '' };
  }

  startSearch(query) {
    const storedTerms = this.props.searchedTerm;
    let foundDuplicate = false;

    if (storedTerms.length === 0 && query) {
      return this.props.search(query);
    }

    if (storedTerms.length !== 0 && query) { …

Run Code Online (Sandbox Code Playgroud)

javascript lodash reactjs react-native

Mou*_*ror

2018 01-02

4
推荐指数

1
解决办法

5657
查看次数

React中的无状态组件和"Props已定义但从未使用过"ESLint错误

如何在ESLint中避免此错误？我应该以不同的方式编写此代码吗？我无法更改ESLint配置,我应该有0个错误...

import React from 'react';
import logo from './logo.svg';
import './style.css';

import SearchBar from '../SearchBar';
import GithubDataTable from '../GithubDataTable';

const App = props => (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">The Task</h1>
    </header>
    <div>
      <SearchBar />
      <GithubDataTable />
    </div>
  </div>
);

export default App;

Run Code Online (Sandbox Code Playgroud)

javascript reactjs eslint

Mou*_*ror

lucky-day

2
推荐指数

1
解决办法

859
查看次数

如何使两张大小相似的不同图像不失真？

我正在从数据库加载 250 个元素，我需要img为每个元素进行渲染。

不幸的imgs是，有两种不同的尺寸：

小桶 381x760（像素）
瓶子 272x1058 (px)

我无法对其进行硬编码，因为我不知道这些图像元素将以什么顺序来自服务器。

这是我的 Minimal, Complete, and Verifiable example

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.img {
  width: 50%;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<body>

  <h2>HTML Image</h2>
  <div class="wrapper">
    <img class="img" src="https://res.cloudinary.com/dfe57evk4/image/upload/v1521215919/2_paabuv.png" alt="Mountain View">
    <img class="img" src="https://res.cloudinary.com/dfe57evk4/image/upload/v1521215916/keg_quozwj.png" alt="Mountain View">

  </div>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

如何在不失真的情况下使它们的尺寸相似？ …

html javascript css

Mou*_*ror

lucky-day

1
推荐指数

1
解决办法

1070
查看次数