對象不能作為帶有樣式組件的 React 子對象

Question

我正在嘗試渲染圖像。 這是我的代碼：

Accordion.jsx

import React from 'react';
import ArrowTemplate from "./ArrowTemplate";

function Accordion() {
    return (
        <div>
            <ArrowTemplate arrowType={"BlackDown"} styles={""}/>
            {/*<ArrowTemplate arrowType={"BlackUp"}/>*/}
            {/*<ArrowTemplate arrowType={"WhiteDown"} styles={"background:black"}/>*/}
            {/*<ArrowTemplate arrowType={"WhiteUp"} styles={"background:black"}/>*/}
        </div>
    );
}

export default Accordion;

ArrowTemplate.jsx

import BlackDownArrowSVG from './svgs/black-down-arrow.svg';
import WhiteDownArrowSVG from './svgs/white-down-arrow.svg';
import styled from 'styled-components';
import PropTypes from 'prop-types';

ArrowTemplate.propTypes = {
    arrowType: PropTypes.string,
    styles: PropTypes.string,
};

function ArrowTemplate(props) {
    const {arrowType, styles} = props;
    switch (arrowType) {
        case "WhiteDown":
            return (
                styled.img.attrs({
                    src: WhiteDownArrowSVG,
                })`${styles !== null ? styles : ""}`
            );
        case "BlackDown":
            return (
                styled.img.attrs({
                    src: BlackDownArrowSVG,
                })`${styles !== null ? styles : ""}`
            );
        case "WhiteUp":
            return (
                styled.img.attrs({
                    src: WhiteDownArrowSVG,
                })`transform: rotate(180deg); ${styles !== null ? styles : ""}`
            );
        case "BlackUp":
            return (
                styled.img.attrs({
                    src: BlackDownArrowSVG,
                })`transform: rotate(180deg); ${styles !== null ? styles : ""}`
            );
        default:
            throw("You need to pass arrowType");
    }
}

export default ArrowTemplate;

SVG 路徑是正確的。

作為錯誤，我得到了這個：

對象作為 React 子對象無效（發現：帶有鍵 {$$typeof、render、displayName、attrs、componentStyle、foldedComponentIds、styledComponentId、target、withComponent、warnTooManyClasses、toString} 的對象）。 如果您打算渲染一組子項，請改用數組。 在 ArrowTemplate 中（在 Accordion.jsx:7）

當我 console.log 我得到一個長對象。 但是當我 console.log文檔中的示例代碼時，我得到了一個類似的對象：

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

//^^^^^^^^^^^^^^^^^^^^^
//This renders with no problem

我哪里出錯了？

Answer 1

嘗試：

import BlackDownArrowSVG from './svgs/black-down-arrow.svg';
import WhiteDownArrowSVG from './svgs/white-down-arrow.svg';
import styled from 'styled-components';
import PropTypes from 'prop-types';

ArrowTemplate.propTypes = {
    arrowType: PropTypes.string,
    styles: PropTypes.string,
};

function ArrowTemplate(props) {
    const {arrowType, styles} = props;
    let StyledArrowTemplate;

    switch (arrowType) {
        case "WhiteDown":
          StyledArrowTemplate = (
            styled.img.attrs({
                src: WhiteDownArrowSVG,
            })`${styles !== null ? styles : ""}`
          );
        break;
        case "BlackDown":
          StyledArrowTemplate = (
            styled.img.attrs({
                src: BlackDownArrowSVG,
            })`${styles !== null ? styles : ""}`
          );
        break;
        case "WhiteUp":
          StyledArrowTemplate = (
            styled.img.attrs({
                src: WhiteDownArrowSVG,
            })`transform: rotate(180deg); ${styles !== null ? styles : ""}`
          );
        break;
        case "BlackUp":
          StyledArrowTemplate = (
            styled.img.attrs({
                src: BlackDownArrowSVG,
            })`transform: rotate(180deg); ${styles !== null ? styles : ""}`
          );
        break;
        default:
            throw("You need to pass arrowType");
    }

    return <StyledArrowTemplate />;
}

export default ArrowTemplate;

編輯：

為最初缺乏解釋而道歉！

因此，發生此錯誤的原因是當您在 JSX 代碼中返回某種對象時。 在這種情況下，它是styled.img.attrs 。 因此，為了解決這個問題，我們聲明了一個變量，然后該變量將被設置為其中一種情況下的樣式組件，具體取決於您提供給ArrowTemplate組件的道具，並在函數結束時返回它。

這樣，您基本上是StyledComponent一樣創建StyledComponent ，但是以動態方式。

Answer 2

Lindsay 的上述答案可能工作正常，但我認為沒有 switch case 會更有意義，而是返回單個組件並將您的條件作為道具傳遞，在樣式組件的定義中執行您的條件邏輯，即就像是...

const ArrowTemplate = styled.div`
  src: ${props => props.color === Black ? BlackDownArrowSVG : WhiteDownArrowSVG};
  ${props => props.direction === Down ? transform: rotate(180) : null }
  etc...
`;

（不確定我上面的語法是否完全正確，但這是基本思想）

和

<ArrowTemplate color={Black} direction={Up} src={src} /> 

Answer 3

如果您在聲明樣式組件時遇到這種情況，您可能會忘記聲明末尾的模板文字。 所以

const AppContentWithSideBar = styled((props) => {
  return (
    <Wrapper>
      <Router>
        <SideBarWrapper>
          <SideBar />
        </SideBarWrapper>
        <MainWrapper>
          {props.children}
        </MainWrapper>
      </Router>
    </Wrapper>
  );
});

應該

const AppContentWithSideBar = styled((props) => {
  return (
    <Wrapper>
      <Router>
        <SideBarWrapper>
          <SideBar />
        </SideBarWrapper>
        <MainWrapper>
          {props.children}
        </MainWrapper>
      </Router>
    </Wrapper>
  );
})``;

Answer 4

您收到此錯誤是因為您將值存儲在函數中而不是變量中。 讓我給你舉個例子，讓你知道。

這對你有用。