我刚刚在React中查看了HOC.他们很酷.但是,不是简单地包装组件就能达到相同的效果吗？

高阶分量

这个简单的HOC将状态作为属性传递给ComposedComponent

const HOC = ComposedComponent => class extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (<ComposedComponent {...this.state} />);
    }      

}

组件包装

此组件将state作为属性传递给子组件

class ParentComponent extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (
        <div>
          {React.cloneElement(this.props.children, { ...this.state })}  
        </div>
      );
    }      

}

尽管两者之间的使用略有不同,但它们似乎都可以重复使用.

通过this.props.children,HOC和组成组件之间的真正区别在哪里？是否有例子只能使用其中一个？使用HOC是一种更好的做法.这些只是您选择自己喜欢的风味的选择吗？

如何确定每个方块的大小相同???

关于JSBIN的预览问题 | 查看JSBIN上的问题代码

我使用flexbox创建网格布局.大多数网格单元没有内容,一些网格单元确实有内容.当一个单元格有内容时,它会抛弃一切. 如何确保所有细胞均匀,无论内容如何？

HTML

我有三行,每行有三个单元格.只有中心单元格的中心行包含子项.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div>
  <div></div>
  <div><span>contains span</span></div>
  <div></div>
</div>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

在css中,中心空间比其他方块大.

body, html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body>div {
  display: flex;
}

body>div>div {
  border: solid 1px blue;
}

div {
  flex-grow: 1;
}

body>div:nth-child(2)>div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
}

使用withRouter()时,如何获得路由上下文,位置,参数等？

import { withRouter } from 'react-router';

const SomeComponent = ({location, route, params}) => (
    <h1>The current location is {location.pathname}</h1>
);

const ComposedWithRouter = withRouter(SomeComponent);

您可以使用withRouter获取该信息,还是必须在组件树中明确传递这些内容？

我在测试使用webpack导入.scss的UI组件时遇到问题.我正在直接测试组件代码,而不是导出的webpack包.

在我的SUT中

我有一些导入scss的代码:

import '!style!css!sass!postcss-loader!../style.scss'

运行测试时,此代码会导致错误:

Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)

廉价的解决方法

我一直在解决这个问题:

try {
    require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }

但这闻起来很脏,我宁愿在我的SUT中没有这个代码.

运行测试

在使用babel-node和babel-istanbul而不是直接使用mocha 时,我无法弄清楚如何在我找到的解决方案中工作.这是我目前正在运行测试的方式:

$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive 

我找到的所有答案都是直接用于摩卡,但我没有运行测试:

$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive

？

我如何在编译器或设置文件中工作,告诉mocha忽略.scss文件.我肯定会在.svg文件旁边遇到这个问题.

JSX Transformer导致错误

当我使用react-tools的转换器转换我的反应文件时

      $ jsx public/dev/jsx public/prod/js --no-cache-dir

或者当我用grunt-react转换时

      $ grunt react

我的生产文件因转换使用React.createElement而中断,错误表明此函数未定义.

      <h1>{this.state.title}</h1>

转换为:

      React.createElement("div", null, 
      React.createElement("h1", null, this.state.title)

代替:

      React.DOM.h1(null, this.state.title)

实时转换器工作正常,因为它使用React.DOM.h1(null, this.state.title).这行代码适用于react,但该React.createElement()函数不起作用且找不到.

如何强制我的自动转换器(JSX或grunt)转换为React.DOM.h1(null)而不是React.createElement(h1, null).为什么转换器使用此功能？

设置状态导致第二次渲染后,反应测试失败

到目前为止,JSDOM和Mocha的测试一直很顺利.到目前为止,还没有必要测试任何改变其状态的组件.我发现我的第一个问题是测试一个改变状态的组件.

错误

1) Reduced Test Case - @current Tests that Fail when Component changes state and renders "before each" hook:
 Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use React.renderToString for server rendering.
  at Context.<anonymous> (test/react-reflux/parts/Reduced-spec.js:47:32)

组件:Reduced.js

var React = require('react');

var Reduced = React.createClass({

  getInitialState() {
      console.log("start off with editing as false");
      return {editing: false};
  },

  edit() {
      console.log("Setting State …

我开发了几个手表应用程序并且我已经掌握了它，但是当我尝试将 watch os 目标添加到 React Native 应用程序时，我遇到了 47 个我不明白的错误。

我正在尝试遵循本教程 - 如何向您的本机应用程序添加 Apple Watch 扩展。

重现步骤

1. 创建一个新的 React Native 项目

首先，我创建了一个新的 React Native 项目。（成功 ？）

react-native init RNWithAppleWatch

2. 构建并运行 React Native 项目

然后我可以构建和运行该项目。（成功 ？）

cd RNWtihAppleWatch; npm run ios;

3. 打开项目工作区并添加一个目标

接下来，我打开工作区文件。此时 React Native 应用程序从 xCode 构建和运行也没有问题。

在工作区中，我选择主项目并单击+下方的目标。

从这里我选择watchOS和Watch App for iOS App：

使用以下设置：

当被问到时，我激活了目标：

并创建了目标。

6. 运行观察目标

这是问题开始浮出水面的地方。我注意到的第一件事WatchApp Extension是在创建目标之后有一个错误：

编译 Swift Sources 有什么问题吗？

如果我尝试WatchApp在模拟器中运行目标，我会收到 47 …

如果你有一个指向 heroku 的域名，你可以将它与 Heroku 应用程序的子域一起使用吗？如果是这样，我在哪里可以找到有关如何设置的信息？

主网站 - heroku 应用程序

    www.mydomainname.com

游戏网站 - 不同的 heroku 应用

    game.mydomainname.com

最近，我一直在使用两个 redux 存储构建通用 Web 应用程序：一个在客户端，一个在服务器上。Redux 似乎是管理状态数据的好工具。可以将 Redux 用于 React 之外的东西吗？例如，您可以在命令行应用程序中使用 Redux 吗？

我觉得这种客户端存储和服务器存储方法打破了“单一事实来源规则”，但感觉很好，到目前为止效果很好。我发现我可以重用大约 80% 的 reducer 来组成两个 store。服务器上的状态通常是一个集合，其中客户端上的状态可以是单个对象。

例如：假设您有一个聊天应用程序的客户端状态：

{
    user: 'mike@aol.com',
    room: {
       name: 'sports',
       users: [ ... ],
       messages: [ ... ]
    }
}

该服务器的状态是类似的，可以使用类似的减速机，但它使用的集合，而不是对象。

{
    connectedUsers: ['mike@aol.com', ... ],
    rooms: [
      {
          name: 'sports',
          users: [ ... ],
          messages: [ ... ]
      },
      { ... },
      { ... }
    ]
}

创建两个状态树重用了许多相同的减速器。这种方法还允许我将动作发送到服务器并响应来自客户端的动作。当有新连接时，使用服务器存储生成状态客户端存储也不是很困难。

我的问题

我对这种通用应用程序的方法很感兴趣。这是否违反任何规则？您可以拥有一个客户端商店和一个服务器商店吗？使用服务器存储生成初始值并不难。

还有其他人以这种方式使用通用应用程序吗？

我正在尝试生成 Google Chrome，但似乎无法进行任何操作。我究竟做错了什么？

 var cp = require('child_process');

 console.log("Spawning Chrome");

 chrome = cp.spawn('/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome',
     ['http://www.nodejs.org']);