Mengapa saya tidak boleh menggunakan komponen sebagai imej latar belakang berulang dalam komponen yang digayakan?

Question

Cuba tetapkan komponen kepada imej latar belakang berulang div Saya mempunyai corak yang digunakan semula di seluruh laman web.

Komponen corak diperkemas:

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',
}

Saya memperkenalkan komponen modal dan luluskannya.

Komponen diperkemas:

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
}

Tetapi atas sebab tertentu ia tidak akan dipaparkan.

Penyelidikan

• Tukar imej latar belakang menggunakan komponen gaya
• Lepaskan url latar belakang sebagai prop kepada komponen gaya
• Tetapkan imej latar belakang menggunakan prop dalam komponen gaya
• Imej latar belakang dalam komponen gaya bertindak balas
• Menggayakan imej latar belakang komponen menggunakan sifat dalam React 17

Apa yang saya lakukan salah dan bagaimana saya boleh memperkenalkan komponen dan menetapkannya untuk mengulangi imej latar belakang secara mendatar?

Answer 1

Anda boleh menjadikan SVG sebagai penanda statik, mengekodkannya ke Base64 dan menggunakannya sebagai URL:

Ujian masa nyata

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>
);

Menggunakan kod anda, ia mungkin kelihatan seperti berikut (saya tidak mengujinya)

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>
  )
}