小编3li*_*t0r的帖子

在使用 Material UI 中的选择时，我正在努力让它们正常工作，使用高度和宽度适当地使用“vh”和“vw”以及使用“vh”的文本大小。

我最终获得了合适的框大小，但由于显然使用“变换”从左上角偏移自身，因此标签文本不再居中。

无论如何，这就是我所拥有的：https : //codesandbox.io/s/material-demo-ujz2g

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    width: "20vw"
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  select: {
    height: "10vh"
  },
  inputLabel: {
    fontSize: "4vh",
    alignSelf: "center"
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const …

很简单,如果我在ES6中有一个类,可以在其中使用箭头功能.

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSearch(this.query.value);
    e.currentTarget.reset();
  }

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search"
               onChange={this.onSearchChange}
               name="search"
               ref={(input) => this.query = input}
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search">search</i>
        </button>
      </form>
    );
  }
}

我问的原因是我的控制台出现错误,即使使用Babel,虽然看起来互联网上有很多资源说明你可以做到这一点(其中大部分是关于使用React进行开发).

这是巴贝尔应该做的事情,并最终会得到本地支持吗？

我得到的错误是意外=符号,就在parens之前.

编辑:我忘了提到,我希望这样做的原因是在Class的上下文中使用'this'关键字,如果我使用常规函数 - 对我的理解 …

你如何用他们的URL预加载所有记录？

这是我在jbuilder中为获取URL而做的事情:

# views/users/index.json.jbuilder
...
json.avatar_url user.avatar.attached? && rails_blob_url(user.avatar)
...


Comment
    has_one :user

User
    has_one_attached :avatar

你会如何预加载所有用户及其头像？

Comments.includes(users: :avatar)

产生以下错误:

ActiveRecord :: AssociationNotFoundError(在用户上找不到名为'avatar'的关联;也许你拼错了吗？)

执行时弹出相同的错误:

User.includes(:avatar)

不确定这是所谓的“发布/订阅”模式还是“发布/订阅”模式的一种形式。我正在尝试创建一个共享状态，以便不同的组件可以订阅它，并且只有在该状态有更新时才会更新。

const useForceUpdate = () => useReducer((state) => !state, false)[1];

const createSharedState = (reducer, initialState) => {
  const subscribers = [];
  let state = initialState;
  const dispatch = (action) => {
    state = reducer(state, action);
    subscribers.forEach((callback) => callback());
  };
  const useSharedState = () => {
    const forceUpdate = useForceUpdate();
    useEffect(() => {
      const callback = () => forceUpdate();
      subscribers.push(callback);
      const cleanup = () => {
        const index = subscribers.indexOf(callback);
        subscribers.splice(index, 1);
      };
      return cleanup;
    }, []);
    return [state, dispatch];
  }; …

默认情况下，React 会在组件停留在同一位置时保留组件的状态。通常，这正是您想要的，因此作为默认行为是有意义的。

示例取自新的React 文档。

Example 1 - the same position、codesandbox、（相关代码）：

  return (
    <div>
      {isPlayerA ? (
        <Counter person="Taylor" />
      ) : (
        <Counter person="Sarah" />
      )}
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  ); 

Example 2 - different position，codesandbox，（相关代码）：

  return (
    <div>
      {isPlayerA &&
        <Counter person="Taylor" />
      }
      {!isPlayerA &&
        <Counter person="Sarah" />
      }
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );

我很困惑为什么中的位置Example 2被认为是不同的？ …

 add_reference :books, :author
 add_column :books, :author_id, :integer

这里添加引用将创建 user_id 列，添加列也在书籍表中创建 user_id 列。它们之间有什么区别。使用引用而不是列的优点是什么？

开设课程，例如：

class Foo
  def initialize(data)
  end
end

class Bar < Foo
end

每个继承的子类Foo都有自己独特的属性，通过选项哈希传入data。

各州的码输出Bar：

class Foo
  def initialize(data)
  end
end

class Bar < Foo
end

我一直无法弄清楚如何记录Bar#initialize.

尝试包括：

class Bar < Foo
  # @overload initialize(data)
  #   @param data [Hash]
  #   @option data [String] :baz Value for baz attribute
end

（什么也没做）

class Bar < Foo
  # @param data [Hash]
  # @option data [String] :baz Value for baz attribute
  # @!parse def initialize(data); end
end …

我正在寻找一种方法来使等宽文本在其容器中尽可能宽泛而不会溢出或破裂。我已经看过CSS3 使文本尽可能大以填充元素而不会溢出并尝试实施建议的解决方案，但在我的情况下似乎不起作用。如果我将字体大小设置为3vw而不是7vw链接问题的答案中的建议，它似乎很接近，但是当我更改行的长度或页面的宽度时，它又关闭了。

这是我的代码：

https://jsfiddle.net/de7qbu19/（fiddle中的代码是一样的）

#song-container {
    text-align: center;
    margin: 20px;
}
#song {
    color: #000;
    font: normal 3vw Courier New,monospace,Courier;
    white-space: pre;
    word-break: break-all;
    text-align: left;
    display: inline-block;
}

#song > span { /* Chords*/
    color: #007fbf;
    cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            
<div class="container-fluid">
    <div id="song-container">
        <div class="panel panel-default">
            <div class="panel-body">
                <span id="song">
[Placeholder]

<span>Em</span> …

我正在使用 Mailchimp API v3.0 来改变列表成员。

使用以下端点对成员进行归档不会出现问题：

DELETE /lists/{list_id}/members/{subscriber_hash}

网络界面允许我“取消存档”成员，将其恢复到之前的状态。

我还没有在API文档中找到这个功能。

我能够使用端点取消存档成员：

PATCH /lists/{list_id}/members/{subscriber_hash}

与身体：

{"status": "subscribed"}

尽管这确实会取消归档该成员，但不会恢复该成员的状态。它只是将状态设置为正文中提供的“已订阅”。

我想将成员恢复到存档之前的状态。如果会员在存档之前订阅，那么我希望在取消存档后订阅它。同样，如果成员在存档之前取消订阅，则应在取消存档后取消订阅。与网络界面的功能类似。

检索已归档成员的数据时，返回数据不包括归档前的状态。

如何使用 Mailchimp API 取消归档成员？我是否忽略了某些内容，或者 API 中是否缺少此功能？

在使用Math.randomjavascript时，我遇到了一个有趣的问题。

根据文档，它产生一个“0到小于1范围内的伪随机数”，但是它可以产生的最大数字是多少，小于1？

我编写了这个愚蠢的代码来尝试获得最高值

maxIteration = 1000000000
value = 0
count = 0
while(value < 1 && count++ < maxIteration) {
    let newValue = Math.random()
    value = value < newValue ? newValue : value
}
console.log('value', value)
console.log('count', count)

我能得到的最高是0.9999999989486876，但它是最高的吗？