Question

我想在Facebook的react.js my-app 上添加背景图片。我可以通过将背景图像设置为div元素来完成此操作。但是我的div只覆盖了页面的一半。这就是我的图像没有占据页面的原因。

相反，我想在body元素上执行此操作。但是如何添加一个body元素并为其设置背景图像呢？

我尝试了这个，但它在我的应用

的App.js文件中无效

<body background="http://i.imgur.com/DaNQJ6I.jpg"></body>

Answer 1

[编辑]

Css-tricks.com 提供了一个非常酷的整页图片解决方案：

https://css-tricks.com/perfect-full-page-background-image/

我将此示例用于我的 React 实现和 useEffect (https://reactjs.org/docs/hooks-effect.html)。

注意：设置样式时，background-size 替换为 backgroundSize。

import React, { useEffect } from "react";
import img from "./test.jpg";

export default function App() {
  useEffect(() => {
    document.body.style.background = `url('${img}') no-repeat center center fixed`;
    document.body.style.backgroundSize = "cover";
    document.body.style.webkitBackgroundSize = "cover";
  }, []);
  return <div className="App"></div>;
}

Answer 2

尝试使用style：

<body style={ bodyStyle }></body>

bodyStyle应如下所示：

var bodyStyle = { backgroundImage: 'url(http://i.imgur.com/DaNQJ6I.jpg)' };

Answer 3

出于某种原因，我无法在反应框架的app.js或app.css文件中添加背景图像。但是，我尝试在index.html上执行此操作。这对我来说很完美。

所以，请在index.html上添加背景图片如果你无法在app.js或app.css中添加背景图片。

而且，未来的读者，如果你找到了办法，请随时回答这个问题，谢谢!!

Answer 4

这对我有用。实际工作在componentDidMount（）中完成。从技术上讲，你可以在任何组件上添加它。比如，你可以把它放在导航栏上，甚至放在布局中。

对于我的项目，我创建了一个组件。将它添加到您的布局（或任何地方），它应该可以工作。

祝你好运！

＆＃13;

export default class BodyStyle extends Component {
  componentDidMount() {
    const { style } = this.props;

    var body = document.getElementsByTagName( "body" )[ 0 ];
    for ( var key in style ) {
      body.style[ key ] = style[ key ];
    }
  }

  render() {
    return <span ref="BodyStyle"/>;
  }
};

＆＃13;

如何在facebook的反应中添加body元素我的应用程序？

4 个答案: