小编Coc*_*oco的帖子

我正在使用webpack和LESS将反应项目放在一起进行样式化.我正在使用组件样式结构,如下所示:

/root
    /src
        /components
           /MyComponent
               -index.js
               -index.less
       /styles
          -colors.less

我希望每个组件通过导入引用它自己的样式:

//MyComponent.js

import React from 'react';
import styles from './index.less';

...
<div className={styles.someclass} >
...

在index.less中我想导入常见的共享样式.就像是:

//index.less

@import "styles/colors.js";

.someclass {
   background: @themecolor;
}

这是我如何设置webpack.config文件为less:

     resolve: {
    alias: {
        components: path.resolve(__dirname, 'src', 'components'),
        reducers:     path.resolve(__dirname, 'src', 'reducers'),
        actions:      path.resolve(__dirname, 'src', 'actions'),
        styles:       path.resolve(__dirname, 'src', 'styles'),
        images:       path.resolve(__dirname, 'src', 'images'),
        pages:        path.resolve(__dirname, 'src', 'pages'),
        lib:          path.resolve(__dirname, 'src', 'lib'),
        utils:        path.resolve(__dirname, 'src', 'utils'),
        examples:     path.resolve(__dirname, 'src', 'examples')
    },
    extensions: ['', '.js','.jsx', '.css', 'png', …

这应该是如此简单,但我已经打破了这几天.我正在尝试动画我的页面过渡.问题是文件SUCK.我一遍又一遍地跟着他们,尝试了各种方式,但无法让它发挥作用.

我想要做的是向右或向左优雅地滑动我的页面,并淡化在其后面优雅地卸载的那个页面.简单吧？我没有在我的网页上使用React Router.

我为此尝试了各种解决方案,但问题似乎在于卸载.更换页面后,现有页面可以在转换之前卸载.我正在使用react-transition-group发布我的尝试,尽管在这一点上,我会接受任何其他有效的解决方案.我不确定react-transition-group是否在实际上得到积极维护,因为还有很多其他帖子可以帮助我做出0回复.

所以在我的app容器上我想要这样的东西:

<App>
  <PageSlider>
     <Page key={uniqueId} />  <==this will be "swapped" through (Redux) props
  </PageSlider>

所以,根据我的阅读,我必须使用TransitionGroup容器作为我的PageSlider,以便它可以管理我的页面的进入和退出.所以这里:

 class PageSlider extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TransitionGroup 
         component="div"
         id="page-slider"
         childFactory={child => React.cloneElement(child,
           {classNames: `page-${this.props.fromDir}`, timeout: 500}
         )}
      >
        {this.props.children}
      </TransitionGroup>

    );
  }
}

我还读过我需要做一个"童工厂"来启用现有的东西.我无法在文档中找到这样的例子.由于页面将来自不同的方向,我将向我传递我想要滑动页面的方向,这将告诉页面它获得了什么类.

现在,至于页面本身,我已经将它包装在CSSTransition中.文档中没有关于如何传递这些内容的好例子,所以我真的很困惑这里要做什么:

 class Page extends Component {
  constructor(props) {
    super(props);
  }

  render() {
   return (
    <CSSTransition>                   <==????????
      {this.props.children}           Do props get passed down?
    </CSSTransition>                  Which ones? 
 );                                   Does "in" …

我正在尝试将我的应用程序迁移到 webpack 4。我的头已经很痛了。

动态导入- 这是我的代码拆分方法（逐页）。但我无法让它工作。使用以下软件包设置了非常简单的测试仪：

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }

这是我的主要测试应用程序：

import React from "react";
import ReactDOM from "react-dom";
import style from "./main.css";
import pageLoader from './pageLoader';

class App extends React.Component {
    render() {
    let page = pageLoader();  
  return (
    <div>
      <p>React here!</p>
      {page}
    </div>
  );
}
};

export default App; …

我想同时更新多条记录，但我不知道该怎么做。

我已经尝试了 pg-promise 和 moment 以及 node 的各种组合：

myTs = Date();
myTs = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); 

用sql：

UPDATE mytable set ts = $1;
UPDATE mytable set ts = $1::timestamp;

错误：

 time zone "gmt-0800" not recognized

我正在尝试设置一个快速的 GraphQL 服务器。当我将以下内容放入服务器启动时，按照教程进行操作：

//   ENTIRE SCHEMA IN MAIN FILE  THIS WORKS!!!

...
var graphql = require('graphql');

const RootQuery = new graphql.GraphQLObjectType({
  name: 'RootQuery',
  description: 'The root query',
  fields: {
    viewer: {
      type: graphql.GraphQLString,
      resolve() {
        return 'viewer!';
      }
    }
  }
});

const Schema = new graphql.GraphQLSchema({
  query: RootQuery
});

app.use('/graphql', graphqlHTTP({ schema: Schema }));
...

它有效，返回数据“查看器！但是由于我不想要主文件中的所有内容，我尝试将此确切代码传输到另一个文件并像这样导入：

//THIS DOES NOT WORK
...
var Schema = require('./build/models/graphql/schema');
  app.use('/graphql', graphqlHTTP({ schema: Schema }));
...

我收到以下错误：

{
  "errors": [
    {
      "message": "Schema must be …

我最初在使用 create-react-app 时遇到了这个问题，所以我只是开玩笑地做了一些简单的设置：

1. 创建了新目录
2. 该目录中的纱线初始化
3. 纱线加玩笑

4. 创建了新文件 sum.js：

      function sum(a, b) {
         return a + b;
      }
      module.exports = sum;
   

   Run Code Online (Sandbox Code Playgroud)

5. 创建文件以测试上述功能

   const sum = require('./sum');
   
   test('adds 1 + 2 = 3' , () => {
       expect(sum(1,2)).toBe(3);
   });
   

   Run Code Online (Sandbox Code Playgroud)

6. 添加到 package.json：

   "scripts": {
   "test": "jest"
   

   Run Code Online (Sandbox Code Playgroud)

   },

但是当我运行 yarn test 时，我得到了这个：

terry@terry-sharewalker:~/myProjects/test-jest$ yarn jest
yarn run v1.13.0
$ /home/terry/myProjects/test-jest/node_modules/.bin/jest

从那里什么也没有发生。它只是挂起。从 create-react-app 运行测试也发生了同样的事情。react-scripts 测试会显示，然后什么都没有。

这是我得到的：

Jest "^24.5.0"
Ubuntu 16.04
yarn 1.13.0
watchman 4.9.0
node 10.15.3

我已经重新安装并升级了我能想到的所有东西，包括 npm、node、watchman、linuxbrew、yarn。如果有人能帮助我，我将永远感激不尽！！

我正在构建一个通过 https 提供服务的网络应用程序。我收到了很多这样的控制台警告：

Mixed Content: The page at 'https://www.sharewalks.com/' was loaded over 
HTTPS, but requested an insecure image 
'http://yandex.st/lego/_/pDu9OWAQKB0s2J9IojKpiS_Eho.ico?1493850556643'. 
This content should also be served over HTTPS.

其中有 14 个 - 来自以下网址（数字更改）：

网站图标错误：

• http://www.google.com/favicon.ico?1493850556625
• http://www.baidu.com/favicon.ico?1493850556625
• http://www.cloudflare.com/favicon.ico?1493850556625
• http://www.yandex.ru/favicon.ico?1493850556633

其他？：

• http://yandex.st/lego/_/pDu9OWAQKB0s2J9IojKpiS_Eho.ico?1493850556633

我需要使用 HTTPS 提供所有内容，因为我想使用地理定位服务，并且我读到某些浏览器不允许它，除非所有内容都是 HTTPS。在测试中，导航器适用于笔记本电脑 Chrome，但不适用于移动浏览器（chrome、safari 和 firefox）。

但我不是要求这些网站图标。我什至不知道他们从哪里被叫到。

我的问题是这些 favicon 是什么，它们为什么要惹我？有没有办法解决？

我正在尝试在 heroku 上的后端应用程序上将 https 设置为这样的子域（例如）：

https://api.mydomain.com

我真的对我发现的所有相互冲突的在线文档感到困惑。另外，我对所有这些 SSL 的东西都很感兴趣。此应用程序将成为仅提供数据服务的后端。我的前端现在是我域下 OpenShift 上的 https 并且它工作正常。这是我所做的：

1. 我的 heroku 应用程序上有一个“爱好”dyno（每月 7 美元），我读到我需要启用这些东西。
2. 我有一个 cloudflare 帐户，它为 https 上的 openshift 前端提供我的域。
3. 我从 GoDaddy 购买了我的域——所以现在它只是指向 cloudflare 名称服务器。
4. 我在heroku（设置选项卡）上设置了子域：api.mydomain.com。它回来说我的“DNS 目标”是 api.mydomain.com.herokudns.com。它还说“域：您的应用程序可以在http://api.mydomain.com上找到”。

5. 我点击了“配置 SSL”>“使用自动证书管理自动配置”，它返回说：

   “将您的 DNS 设置更新到我们的安全域”

6. 老实说，不太确定这意味着什么。我试图回到 cloudflare 并添加一个 DNS 记录（DNS 选项卡）。像这样：

Type: CNAME
Name: api                                <--is this right?
Value: api.mydomain.com.herokudns.com    <-- what do I put here?

Run Code Online (Sandbox Code Playgroud)

但这不起作用。我怎么知道？我打字 heroku certs:auto，它返回“失败”。还尝试了值：mydomain.com.herokudns.com 前面没有“api”。我真的很困惑，文档没有多大帮助。有谁能够帮助我？

我正在构建一个全页面的网络应用程序，它在 chrome 中运行良好，但在 safari mobile 中它变得不稳定。这是因为 safari mobile 顶部有导航栏，底部有另一个栏。我怎样才能为他们创建我的页面帐户？我一直在研究这个数周并尝试了每一个建议。我希望这里有人可以提供帮助。

你如何获得有和没有顶部和底部栏的高度？事实上，我真的不想要任何一个栏，但据我所知，除了用户将应用程序添加到他们的主屏幕之外，没有办法摆脱它们。如果我的用户还没有将它添加到他们的首页，我必须考虑条形的高度。我必须考虑它们的原因是我的页面有一个地图，它必须有一个固定的高度才能显示，它不能是 flex 的。我还在屏幕的顶部和底部都有按钮和用户控件，它们必须始终可见。

现在发生的事情是，有时内容会跳到导航栏下方，因此这些控件变得无法使用。

我想将页面高度设置为导航栏和状态栏之间的高度，如果它们正在显示，则为可用屏幕高度。正在寻找 css 或 javascript 解决方案。

有人可以帮忙吗？

使用 ios 11.2.6 进行测试。

我刚刚将iPhone 7上的iOS更新为11.3.1。当我将Web应用程序添加到首页（独立模式）时，状态栏（位于顶部的连接信息）现在显示为纯白色的条（白色为白色）。

我试过了：

1. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
2. <meta name="apple-mobile-web-app-status-bar-style" content="black">
3. <meta name="apple-mobile-web-app-status-bar-style" content="default">
4. <meta name="apple-mobile-web-app-status-bar-style" content="white">
5. 完全删除元标记。

一切都无济于事。我并不在乎它是什么颜色，但是白色条看起来很哑。有人可以帮忙吗？

如果我像这样循环一个 react 组件的子级：

React.Children.forEach(this.props.children, (child) => {

       //checking child's props and such...
      if (child.props[someprop] == some condition) {
         break out of loop here
      }
});

但是如何跳出这个循环呢？我想检查孩子的某些道具并在条件下爆发。有没有休息或退出或为此？或者还有另一种方法来循环 React 的孩子吗？