Warum kann ich eine Komponente nicht als sich wiederholendes Hintergrundbild in einer gestalteten Komponente verwenden?

Question

Versuchen Sie, die Komponente auf ein sich wiederholendes Hintergrundbild einzustellen. div Ich habe ein Muster, das auf der gesamten Website wiederverwendet wird.

Optimierte Musterkomponenten:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const Container = styled.svg`
  height: ${({ height }) => height};
`

const Path = styled.path`
  fill: ${({ color }) => color};
`

export default function Pattern({ height, color }) {
  return (
    <Container height={height} viewBox="0 0 20 20" data-cy="svg-pattern">
      <Path
        color={color}
        d="M0.5,0.4v19.2h19V0.4H0.5z M13.5,15.5L7,15.9l-3.5-5.5l3-5.9L13,4.1l3.5,5.5L13.5,15.5z"
      />
    </Container>
  )
}

Pattern.propTypes = {
  height: PropTypes.string,
  color: PropTypes.string,
}

Pattern.defaultProps = {
  height: '10px',
  color: 'blue',
}

Ich stelle die modale Komponente vor und übergebe sie.

Optimierte Komponenten:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

// Components
import { Pattern } from '../atoms'

const Container = styled.div`
 // Removed
`

// HERE
const Repeat = styled.div`
  margin-bottom: ${({ theme }) => theme.space.normal};
  width: 100%;
  background-image: url(${({ background }) => background});
  background-repeat: repeat-x;
`

export default function SoQues(props) {
  return (
    <Container>
      <Repeat background={<Pattern color={'red'} />}/>
    </Container>
  )
}

SoQues.propTypes = {
  // props
}

Aber aus irgendeinem Grund wird es nicht gerendert.

Forschung

• Hintergrundbild mithilfe von Stilkomponenten ändern
• Übergeben Sie die Hintergrund-URL als Requisite an die Stilkomponente
• Legen Sie das Hintergrundbild mithilfe von Requisiten in der Stilkomponente fest
• Hintergrundbild in der Stilkomponente reagiert
• Komponentenhintergrundbild mithilfe von Eigenschaften in React 17 gestalten

Was mache ich falsch und wie kann ich eine Komponente einführen und so einstellen, dass sie das Hintergrundbild horizontal wiederholt?

Answer 1

您可以将 SVG 渲染为静态标记，将其编码为 Base64 并将其用作 URL：

实时测试

import * as React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';

export default function App() {
  const mySvgBase64Encoded = btoa(renderToStaticMarkup(<MySvg />));
  return (
    <div
      style={{
        width: '100%',
        height: '100vh',
        background: `url(data:image/svg+xml;base64,${mySvgBase64Encoded})`,
      }}
    />
  );
}

const MySvg = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
    <style>{`.st0{fill:#bcbbbb}.st1{fill:#f48023}`}</style>
    <path className="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" />
    <path
      className="st1"
      d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"
    />
  </svg>
);

使用您的代码，它可能类似于以下内容（我没有测试它）

const Repeat = styled.div`
  margin-bottom: 20px;
  width: 100%;
  background-image: ${({ background }) => `url(data:image/svg+xml;base64,${background})`};
  background-repeat: repeat-x;
`


export default function App() {
  const background = btoa(renderToStaticMarkup(<Pattern height="10px" color="red" />))
  return (
    <div>
      <Repeat background={background}/>
    </div>
  )
}