小编Noi*_*art的帖子

目前，我正在使用React：

 ReactDOM.render(<HelloMessage name="John" />, mountNode);

这将替换的全部内容mountNode，是否可以insertBefore代替替换？我想将其作为第一个孩子插入。

编辑-为什么我需要这个简化的案例。我的组件是一个菜单，当它处于打开状态时，它会打开并显示抽屉等项目。因此，我必须在菜单组件后的元素上添加一个框阴影，以表明该元素位于显示的元素上方。我用这个CSS做到这一点：

.myComponent[data-state=open] + div {
  background-color: red;
}

但是myComponent没有相邻的兄弟姐妹，因为我替换了目标对象的内容，所以这失败了。因此，我的解决方法是在每个渲染器上，在父节点上设置属性：

    if (this.refs.myc) {
        this.state.profiles.length > 0 ? this.refs.myc.parentNode.setAttribute('data-state', 'open') : this.refs.myc.parentNode.removeAttribute('data-state'); // my ugly work around, put the data-state attribute on the parentNode of mountNode
    }

但是，这不是有效的，因为它不是在虚拟dom上设置，而是每次在dom上设置。所以我想将我的组件作为第一个孩子插入体内，这样我的样式表就可以工作了。

这是工作的小提琴-https: //jsfiddle.net/Noitidart/69z2wepo/26319/

我有一个已知高度的容器（高度有时比屏幕长）。

这个容器有一个垂直和水平居中的元素（via flex）。

我希望这个元素总是在屏幕上垂直居中在容器可见部分的块中。

我试过的：

• position:sticky; top:50% - 然而，这只会让它在容器的下半部分居中。
• position:sticky; bottom:50% - 然而这只会让它以上半部分为中心
• position:sticky; top: 50%; bottom:50%;- 它似乎top覆盖bottom所以这就像我第一次尝试top:50%只
• 我尝试设置负值但没有用

这是一个演示：

.container {
  height: 1200px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-piece {
  background-color: green;
  position: sticky;
  top: 50%;
}
.center-piece2 {
  background-color: steelblue;
  position: sticky;
  bottom: 50%;
}

<div class="container">
  <div class="center-piece">
    #1
  </div>
  <div class="center-piece2">
    #2
  </div>
</div>

无论如何要保持它完全居中，同时“始终在屏幕上”，在容器的可见部分，顶部和底部？

这是我的应用程序的截屏视频：https : //www.youtube.com/watch?v=CwYaBgolNHU …

我有这个:

function sayHello() {
    return new Promise( resolve => {
       throw new Error('reject');
    });
}

new Promise(resolve => sayHello()).then(ok => console.log('ok:', ok)).catch( err => console.error('err:', err) );

然而.catch永远不会触发.我虽然如果我在承诺中返回一个承诺,它会被链接到最高级别.then并.catch重新被重新给孩子.then和.catch？

我刚吃了最疯狂的虫子.在我的onKeyDown我毁灭preventDefault了e.但是当我打电话的时候preventDefault()我会得到:

TypeError:这是未定义的[了解更多] react-dom.js:13987:5

我正在使用React v15.4.1,并在下面的屏幕截图中突出显示该行:

如果我不进行破坏,只是使用e.preventDefaut()它.有人知道为什么吗？这是巴贝尔的一个错误吗？

const El = React.createClass({
  displayName: 'El',
  onKeyDown(e) {
    let { key, preventDefault } = e;
    preventDefault();
  },
  render() {
    return React.createElement('input', { onKeyDown:this.onKeyDown });
  }
});

嗨,我试图在我的https://www.graph.cool/ db 上写一个带有变异的数据.我的项目是一个React web-app,我使用Apollo作为graphql客户端和graphql-tag npm包作为模板文字解析器.

问题是我不知道如何使用嵌套数据为正确的变异安排gql模板字符串.我的架构看起来像这样,例如,注意"公司"类型的字段"地址"是"地址"对象类型的数组.

type Company {
  name: String!
  website: String
  Owner: User
  Addresses: [Addresses]
}

type User {
  name: String!
  email: String
}

type Address {
  street: String!
  city: String!
  country: String
  contacts: [Contact]
}

type Contact {
  name: String
  email: String
  phone: String
}

例如,我想在一个突变中同时创建一个新公司,它的新所有者和多个地址.对于我需要创建新联系人的地址.

我想在根处渲染null,因此我可以拥有一个呈现null的完整树,但只是利用React的组件(+它的生命周期方法)结构.

这里有一些关于"返回null概念"的信息:https://github.com/joshwcomeau/return-null - 来自react conf的照明讲话.

我正在制作电子应用程序.在主要范围内,没有dom.在这个主范围(index.js)中我有我的redux存储,我在整个树中返回null,包括root.但是我最初无法渲染它,因为对于初始渲染我需要像这样使用ReactDOM.render:

ReactDOM.render(<AllNullStuff />, document.getElementById('something'))

我没有DOM,反正有渲染吗？

如果我null以root身份尝试,我会收到错误:

错误:_registerComponent(...):目标容器不是DOM元素.

有没有办法渲染完整的null树,所以不需要DOM？

我需要做一个全球性的addEventListener事情。我正在使用 react native 并且需要监听深度链接重定向事件。我无法弄清楚 redux-saga 的方法来做到这一点。我需要put从 addEventListener 中的回调启用 a 。

我目前做了导入store然后做的坏黑客，store.dispatch(...)如下所示：

import store from './flow-control'

Linking.addEventListener('url', ({ url }) => store.dispatch(_redir(url)));

有没有一种 redux-saga 方法来做到这一点？

我希望把它放到 aa saga 也许：

function* reduxSaga() {

    const url = yield Linking.addEventListener('url', ({ url }) => ???);

}

或者至少用这样的 put 替换 store.dispatch ：

import { put } from 'redux-saga/effects'

Linking.addEventListener('url', ({ url }) => put(_redir(url)));

使用 redux-saga 执行此操作的正确方法是什么？

这可能只是一个 Android 6.0 错误。我在 Android 5.1.1 和 Android 7.0 中测试了下面的小吃，但没有发生。

每当用户键入“@”时，我都会尝试自动完成。我成功地做到了这一点，但是一旦我退格几次，本机端的值就变成了我以前从未有过的值。我已将案例简化为以下代码：

请尝试这里的小吃 - https://snack.expo.io/@noitsnack/what-the-heck---autocomplete-then-backspace-bug 或将代码复制并粘贴到新react-native init项目中。我在 RN 0.51 和 RN 0.54 中进行了测试。

1. 请然后输入 Hi @
2. 您将看到它自动完成为Hi @foobar.
3. 然后退格一次，现在正确了Hi @fooba。
4. 再次退格，现在是Hi @foHi（这是错误，应该是Hi @foob）

这是一个受控输入。我不知道为什么它会变成Hi @foHi第二个退格。如果我模糊然后在第 3 步之后它不会回来。

我在另外两个设备上试过，Android 7.0 和 Android 5.1.1，没有这个错误。它只发生在我的 Android 6.0 上。我认为这是一个依赖于操作系统的错误。有没有人对实际发生的事情有想法？这将帮助我了解如何在所有设备上解决此问题。

这真的是 RN 方面的错误吗？

我在此处以高清格式录制了此行为的截屏视频：

https://gfycat.com/RectangularAltruisticEuropeanfiresalamander

这是一个GIF：

代码（复制自世博小吃）：

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native'

class …

就像在网络浏览器中一样，我们有 onBeforeUnload （与 onUnload）来显示警报或一些警告“有未保存的数据 - 您确定要返回吗”。

我正在尝试做同样的事情。我在反应导航的文档中找不到任何内容。

我想做一些像这样的真正黑客的事情，但我不知道这是否是正确的方法：

import React, { Component } from 'react'
import { StackNavigator } from 'react-navigation'


export default function ConfirmBackStackNavigator(routes, options) {
    const StackNav = StackNavigator(routes, options);

    return class ConfirmBackStackNavigatorComponent extends Component {
        static router = StackNav.router;

        render() {
            const { state, goBack } = this.props.navigation;

            const nav = {
                ...this.props.navigation,
                goBack: () => {
                    showConfirmDialog()
                    .then(didConfirm => didConfirm && goBack(state.key))
                }
            };
            return ( <StackNav navigation = {nav} /> );
        }
    }
}

我已经应用了这样的配置文件 kubectl apply -f deploy/mysql.yml

如何取消应用此特定配置？