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

我这样做是为了说明问题。 问题是，在第一个inputfield中键入任何内容时，它都不起作用，因为它被包装在一个样式化的组件中。第二种方法有效，因为它没有包装。为什么会这样？谢谢你的解释

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

---

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

---

这是一本。

太棒了，谢谢。我想这几次被误用了。这就是我们来这里的目的；-但是如果你注意到了，所有的例子都是在课堂之外做的