使用reactjs向网页添加背景

编程问答 2022-06-10

问题描述

我正在尝试使用reactjs向网页添加背景。但是，我在使用正确的HTML脚本时遇到问题。我已经将一个常量变量的值设置为一个元素，但是我不确定为什么要将它放在HTML脚本中以便在编译后显示背景。

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = (name === '' ? 'Wyatt Railey': name);
const animalFact = (<div background:{background}>
  <h1>
    {title}
  </h1>
</div>);
const background = <img className='background'
alt='ocean'
src='./images/ocean.jpg' />

ReactDOM.render(animalFact,document.getElementById('root'));

解决方法

我不确定它是否有效

background:{background}

可能是

background={background}

但是，我仍然认为它仍然正确，因为您没有使用任何程序包来进行后台工作。我建议使用CSS。

如果您尝试设置背景，我建议采用两种方法，

  • 添加img，然后添加css以使其固定在页面上，负z-index为不与页面干扰，
  • 或者，只需使用css在父组件（由ReactDOM.render渲染）中添加背景图像即可。
htmljavascriptreactjsreactjs