没有看到您的其余代码，这是一个猜测。创建 EditorContainer 时，请为组件指定唯一键：

<EditorContainer key="editor1"/>

当重新渲染发生时，如果看到相同的键，这将告诉 React 不要破坏并重新生成视图，而是重用。然后焦点项目应该保持焦点。

我一次又一次地回到这里，总是在最后找到我在别处的解决方案。所以，我会在这里记录它，因为我知道我会再次忘记这一点！

input在我的案例中失去焦点的原因是因为我正在重新渲染input状态更改。

越野车代码：

import React from 'react';
import styled from 'styled-components';

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    const Container = styled.div``;
    const Input = styled.input``;
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

所以，问题是我总是在一个地方开始对所有内容进行编码以快速测试，然后将其全部分解为单独的module。但是，这里这个策略适得其反，因为在输入更改时更新状态会触发渲染功能并且焦点丢失。

修复很简单，从头做module化，也就是“把Input组件移出render功能”

固定码

import React from 'react';
import styled from 'styled-components';

const Container = styled.div``;
const Input = styled.input``;

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

参考 解决方案：https : //github.com/styled-components/styled-components/issues/540#issuecomment-283664947

如果这是react-router中的问题，请<Route/>使用renderprop 而不是component.

<Route path="/user" render={() => <UserPage/>} />

失去焦点是因为componentpropsReact.createElement每次都使用而不是重新渲染更改。

详情请见：https : //reacttraining.com/react-router/web/api/Route/component

我用钩子也有同样的症状。然而我的问题是在父级内部定义一个组件。

错误的：

const Parent =() => {
    const Child = () => <p>Child!</p>
    return <Child />
}

对：

const Child = () => <p>Child!</p>
const Parent = () => <Child />

我的回答与@z5h 所说的相似。

就我而言，我曾经为组件Math.random()生成一个唯一key的。

我认为key仅用于触发该特定组件的重新渲染，而不是重新渲染该数组中的所有组件（我在我的代码中返回一个组件数组）。我不知道它用于在重新渲染后恢复状态。

删除它为我完成了工作。