小编Bra*_*ham的帖子

我有一个组件,有时需要作为一个锚呈现,其他时候作为一个简单的div.在<anchor>我触发关断的,以确定所需要的是<div>道具.如果它存在,我需要渲染包含在锚点中的组件prop.否则它只是呈现为this.props.url.

可能？

这就是我现在正在做的事情,但感觉它可以简化:

if (this.props.link) {
    return (
        <a href={this.props.link}>
            <i>
                {this.props.count}
            </i>
        </a>
    );
}

return (
    <i className={styles.Icon}>
        {this.props.count}
    </i>
);

更新:

这是最后的锁定.谢谢你的提示,@ Sulthan!

import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

export default class CommentCount extends Component {

    static propTypes = {
        count: PropTypes.number.isRequired,
        link: PropTypes.string,
        className: PropTypes.string
    }

    render() {
        const styles = require('./CommentCount.css');
        const {link, className, count} = this.props;

        const iconClasses …

你读得对.在办公室中的多台机器上进行测试,方案之间的唯一区别是浏览器大小.一位同事将它缩小到2000px的甜蜜点.当我们每个人将浏览器的大小调整为> = 2000px宽并将鼠标悬停在具有变换动画的元素上时,页面上的各种元素 - 特别是具有CSS渐变背景的任何元素 - 将会闪烁.相反,如果您将浏览器的大小调整为<​​2000px宽并将鼠标悬停在同一元素上,则不会发生闪烁.

其他人看到过这种奇怪的行为吗？为什么2000px是一个神奇的数字,2000px究竟发生了什么？

注意 - 由于此网站尚未公开,我无法真正共享屏幕截图/视频/链接,并且代码相对不必要,因为这似乎更像是一个浏览器问题.

注2 - 我的问题实际上是围绕在2000px的Safari中发生了什么,不一定是如何修复闪烁backface-visibility或translateZ等等.原因是我们-webkit-font-smoothing: subpixel-antialiased;在整个网站中大量使用并使用任何这些技巧胜过整个页面的属性,为所有文本打开抗锯齿/灰度.

编辑 -好的,抱歉没有早点这样做.这里有一些jsFiddle中的代码应该重现这个问题:http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

请记住,Safari必须设置为至少2000px宽才能实现.

使用我们当前的设置,你总是必须输入分支名称(即:git pull origin feature-branch"当拉动时.我已经犯了从一个分支拉到另一个分支的错误,意外地将两个分支与两个非常不同的版本合并.我想要通过配置Git来避免这种情况,这样只需键入git pull就可以拉出当前的分支.

我该怎么做呢？

假设我有一个看起来像这样的css文件:

/* Base styles */
.content {
    background-color: var(--background);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

@media (min-width: 500px) {
    .content {
        font-size: 22px;
    }
}

/* Headers */
h2 {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

/* Classes */
.small-caps {
    font-feature-settings: "tnum";
    letter-spacing: 0.05em;
}

使用PostCSS,您可以使用另一个类的属性,如下所示:

.another-class {
    composes: content from "other-file.css";
}

......将编译为:

.another-class {
    background-color: var(--background);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px; …

我的故事书使用以下故事分组：

Introduction\nStyleguide\nAtoms\n  Component\n     README\n     Examples\n  Component\n     README\n     Examples\nMolecules\n  Component\n     README\n     Examples\nOrganisms\n  Component\n     README\n     Examples\n

\n
• 基本上分为三组：原子、分子和有机体。
\n
• 每个组都应该有按字母顺序排列的组件。目前这有效。
\n
• 每个组件都有一个 README mdx 文件，然后所有故事都嵌套在示例下。
\n

I\xe2\x80\x99m 目前正在对这样的故事进行排序：

Introduction\nStyleguide\nAtoms\n  Component\n     README\n     Examples\n  Component\n     README\n     Examples\nMolecules\n  Component\n     README\n     Examples\nOrganisms\n  Component\n     README\n     Examples\n

这让我很接近，但是当我希望首先出现自述文件时，组件故事中的自述文件和示例按字母顺序显示。

这可能吗？

我\xe2\x80\x99m 不清楚如何在使用以下设置时模拟我的 api 响应。

我有以下测试：

import React from \'react\';\nimport { cleanup, render, wait } from \'@testing-library/react\';\nimport axios from \'axios\';\nimport Condition from \'./index.jsx\';\n\njest.mock(\'axios\', () => {\n  return {\n    create: jest.fn(() => ({\n      get: jest.fn().mockResolvedValue({ data: {} }),\n      interceptors: {\n        request: { use: jest.fn(), eject: jest.fn() },\n        response: { use: jest.fn(), eject: jest.fn() },\n      },\n    })),\n  };\n});\n\n\nafterEach(cleanup);\n\ntest(\'fetches and displays data\', async () => {\n  axios.get.mockResolvedValue({ data: \'mock data\' });\n  const { container } = render(<Condition {...props} />);\n  await wait(() => …

刚刚开始使用这种技术,并在PC端出现了奇怪的结果.事实上,我在PC上预览这个网站的每一个浏览器都使得字体看起来很整洁.例:

在Mac上:

http://dropbox.smallparade.com/howto-mac.png

在电脑上:

http://dropbox.smallparade.com/howto-pc.png

有人有这个问题的经验吗？有解决方案吗？它与字体的创建方式有什么关系吗？感谢我能得到的任何帮助.我在fontsquirrel.com上使用了font-face生成器.

I\xe2\x80\x99m 使用 plop 为基于 React 的组件库生成组件。我有一个充满 Handlebars 模板的目录，用于创建新的组件目录，并且一切运行良好。我还有这个index.js文件作为我的捆绑器的入口点。它\xe2\x80\x99s 充满了大量的导入和导出。它看起来像这样：

import { Badge } from \'./components/Badge\';\nimport { Button, ButtonMemo } from \'./components/Button\';\nimport { Column } from \'./components/Column\';\nimport { ErrorBoundary } from \'./components/ErrorBoundary\';\nimport { FormBasicInfo } from \'./components/FormBasicInfo\';\nimport { FormLogin } from \'./components/FormLogin\';\nimport { FormSignup } from \'./components/FormSignUp\';\nimport { Icon } from \'./components/Icon\';\nimport { Input } from \'./components/Input\';\nimport { Link } from \'./components/Link\';\nimport { Loader } from \'./components/Loader\';\nimport { Logo } from \'./components/Logo\';\nimport { Row } from \'./components/Row\';\nimport { …

在Safari或Chrome中查看这个jsFiddle,然后在Firefox中查看:http://jsfiddle.net/brandondurham/LRJhm/

它在Webkit中的样子:http://cloud.smallparade.com/B4TE

它在Firefox中的样子:http://cloud.smallparade.com/B53R

您会看到Firefox中的灵活框已损坏.两个box(.left)中的较长时间将css属性white-space设置为,nowrap因为,我不希望它包装.这个单一属性使灵活的盒子中断并扩展以适应.leftdiv 的整个内容.

其他人看到过这种行为吗？有修复？

我在用 Jest 和 react-testing-library 模拟 axios 时遇到了麻烦。我被 axios 拦截器的错误困住了，无法绕过它。

这是我的api.js文件：

import axios from 'axios';

const api = axios.create({
  baseURL: window.apiPath,
  withCredentials: true,
});

api.interceptors.request.use(config => {
  const newConfig = Object.assign({}, config);
  newConfig.headers.Accept = 'application/json';

  return newConfig;
}, error => Promise.reject(error));

在我的组件中调用 api：

const fetchAsync = async endpoint => {
  const result = await api.get(endpoint);
  setSuffixOptions(result.data.data);
};

然后在我的规范文件中：

jest.mock('axios', () => {
  return {
    create: jest.fn(),
    get: jest.fn(),
    interceptors: {
      request: { use: jest.fn(), eject: jest.fn() },
      response: { …