Question

我对React还是比较陌生的（从Angular过来之后），并且在尝试将样式化组件的属性传递给它时遇到麻烦。

我收到此错误：

/src/chat/Container.js
  Line 115:5:  'cssOverrides' is not defined  no-undef

Search for the keywords to learn more about each error.

这是我的App.js组件：

const [isOpen, setIsOpen] = React.useState(false);
  const cssOverrides = useSelector((state) => state.cssOverrides.ChatWindow)

  return (
    <Provider store={store}>
      {isOpen ? (
        <ChatContainer setIsOpen={setIsOpen} cssOverrides={cssOverrides} />
      ) : (
        <LauncherContainer setIsOpen={setIsOpen} cssOverrides={cssOverrides} />
      )}
    </Provider>
  );

以及子组件之一：

export default function Container({ setIsOpen, cssOverrides }) {
  const [isClosing, setIsClosing] = React.useState(false);

和样式化的组件（在这里我试图使用传递给它的css字符串作为属性）

const Launcher = styled.div`
  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
  border-radius: 6px 6px 0 0;
  position: absolute;
  bottom: 0;
  height: 38px;
  width: 375px;
  right: 20px;
  position: fixed;
  overflow: hidden;
  ${cssOverrides}
  animation: ${({ isClosing }) =>
    isClosing
      ? css`
          ${slideDown} ${CLOSING_DURATION}ms
        `
      : css`
          ${slideUp} 200ms
        `};
`;

任何人都可以提供有关为什么发生此错误的任何建议吗？谢谢

Answer 1

您需要将该属性用作回调。

// Good
const Launcher = styled.div`
  ${({ cssOverrides }) => cssOverrides}
`;


// Bad
// Looks for cssOverrides value in the outer scope, where its not defined.
const Launcher = styled.div`
  ${cssOverrides}
`;

// Usually such syntax used for css blocks
import styled, { css } from 'styled-components'

// Not passed as prop, located in the outer scope
const cssOverrides = css`
   background-color: blue;
`

// Good
const Launcher = styled.div`
  ${cssOverrides}
`;

Answer 2

我找到了答案。我忘记将属性cssOverrides添加到JSX中的Launcher组件实例中

<Launcher isClosing={isClosing} cssOverrides={cssOverrides}>

无法访问Styled.div组件内的React组件的道具

2 个答案: