导致不同行为的样式化组件

Question

我做了这个 sandbox 来说明这个问题。 问题是，当在第一个输入字段中输入任何内容时，它不起作用，因为它被包装在一个样式化的组件中。第二个有效，因为它没有被包裹。为什么这个？感谢任何解释。

const Wrapper = styled.div`
  padding: 15px;
`;
return (
  <div>
    <Wrapper>
      <AsyncTypeahead
        ... // <= does not work, because of "Wrapper"
      />
    </Wrapper>
    <AsyncTypeahead
      ... // <= works, because no "Wrapper"
    />
  </div>
)

Answer 1

将包装器定义移到 class 之外，不应在每次渲染时调用它，它实际上会生成一个 React 组件，只需定义一次。

这是一个updated and working version of your sandbox。