小编zmi*_*mii的帖子

基本上我需要能够TypeScript在我的IDE中编写(这非常容易开发),将其编译为ES6(js的未来),然后应用babel.js(因为所有浏览器都不支持大多数ES6)来获得生成的ES5脚本.

这是可能的,或者我如何才能获得相同的结果？

通常在我的代码中,我使用的一些变体很少有不同的字体,例如:

• Arial,font-weight:400,font-style:normal
• Arial,font-weight:400,font-style:italic
• Arial,font-weight:700,font-style:normal
• Helvetica,font-weight:400,font-style:normal
• Helvetica,font-weight:400,font-style:italic

我正在使用CSS-IN-JS库styled-components,所以不使用一些styles.css.有时候,设计师到我这里来,问一次改变Arial,以Comic Sans用于font-style: italic;与font-weight: 400;

这不能用简单的跨项目的代码库替换是代码有此字体的其他变体.

我想最大限度地减少合并该更改所需的工作量,因此需要在一个地方隔离这些字体对象.

题 :

我为此设计了3种方法,第3种方法似乎是最好的方法,但请根据您的经验提出建议.也许下面指定的每一个都有一些额外的缺点或优点？

方法:

第一种方法

我想将这些文本定义提取为单独的style-components,如:

const ArialGeneral = styled.span`
  font-family: Arial;
  font-style: normal;
  font-weight: 400;
`

const ArialNormal = styled(ArialGeneral)``
const ArialNormalItalic = styled(ArialGeneral)`
  font-style: italic;
`

然后用相关样式包装所有文本出现.

...
<HeroText>
  <ArialNormal>
    Welcome to our system!
  </ArialNormal>
</HeroText>
...

其中的缺点是:

• 额外的JSX标签

• 可能需要一些计算成本来重新渲染这些额外的组件以及浏览器的CSS计算

优点:

• 我将有一个地方来管理任何给定[font-family, font-style, font-weight]组合的所有出现

第二种方法

使用相同的技术,但不是在类的形式中使用基本相同的定义定义styled-components使用全局styles.css,例如: …

有没有办法让 VS Code 自动在提交消息文本区域中添加分支名称？

就像我在分支“ID-7345”上并且刚刚更新了例如 React.js 版本一样，我需要编写：

ID-7345: updated React.js to version 16.0

我想每次都省略写分支名称，所以无论我访问此页面，我都会看到ID-7345:预先填充的内容，并且光标在其后闪烁。

如何将字符串的长度应用于从某些数据集创建的某个组件集合,如下所示:

{this.state.list.map(item => {
  const url = item.url;
  return (
    <ListItemComponent url={url} key={url}/>
  );
})}

有一些限制吗？拥有长密钥值会对性能产生什么影响？

背景.有时候我们需要创建很长的项目列表(比如编码了很多参数的url),只有合适的/唯一的东西才能用作自然键才是这么长的事情.

技术说明： 由于 axios 对 Node 和浏览器使用不同的库/机制，因此这个问题仅Node.js涉及axios@0.18.0.

我可以为库设置以下拦截器axios（https://github.com/axios/axios#interceptors）：

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    //
    // I am asking about this error handler and this error object
    //
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // …

我有一个具有以下结构的React应用程序:

组分A由B和C组成

当组件B调用它的componentDidMount方法时,所有组件完成安装是否正确？

或者换句话说,在树中的所有组件都安装后,React会触发componentDidMount吗？

或者当组件A安装时调用组件B ？componentDidMount

我添加了两个库到我的 package.json

  "devDependencies": {
    ...
    "react-dom/test-utils": "*",
    "react-test-renderer/shallow": "*"
  },

正如react docs所建议的那样，以符合react生态系统的第 16 版。

运行后npm install --verbose我得到了这个：

18 verbose node v8.5.0
19 verbose npm  v5.3.0
20 error code EINVALIDPACKAGENAME
21 error Invalid package name "react-dom/test-utils": name can only contain URL-friendly characters
22 verbose exit [ 1, true ]

还尝试devDependency通过cli安装它会出现此错误：

npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t ssh://git@github.com/react-dom/test-utils.git
npm ERR! 
npm ERR! Permission denied (publickey).
npm ERR! …

我正在使用Next.jsReact 应用程序的服务器端渲染（带有styled-components），并且我用来显示我在代码中使用的组件名称的 Babel 插件有问题。

这是我的.babelrc文件：

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ]
    },
    "production": {
      "presets": "next/babel",
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "displayName": false,
            "ssr": true
          }
        ]
      ]
    },
    "test": {
      "presets": [
        [
          "env",
          {
            "modules": "commonjs"
          }
        ],
        "next/babel"
      ]
    }
  }
}

当我跑步时cross-env NODE_ENV=development concurrently "tsc --watch" next

我得到这些行 - 意义.babelrc在编译过程中使用：

[1] > …

是否有编写 Gulpfiles、命名空间、构建配置文件等的约定？

也许有一些基本的常识可以从 Grunt 世界中学到？

你如何处理 Gulpfile 的结构，就好像你要辞掉工作，下一个 JS 开发人员会来并直观地了解如何构建项目？

在react-bootstrap@0.24.5我使用Input属性defaultValue指定在组合框中选择的起始值

<Input type='select'
             ref='templateSelect'
             defaultValue={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</Input>

应该如何处理这个react-bootstrap@0.30.7(最新的)Input不推荐使用的地方,这里应该使用的新组件FormControl不提供这样的属性？

应该value用呢？

<FormControl type='select'
             ref='templateSelect'
             value={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</FormControl>

或者类似这样的事情:

value={this.state.templateId || 'default value'}