Я учу себя Реакту, это было тяжело, извините за мое плохое словоблудие, потому что это все еще очень ново для меня.

Я пытаюсь написать компонент, который будет отображать фоновое изображение на определенной странице в зависимости от заданного реквизита. Я пришел к выводу, что с интерполяцией это может сработать, однако я не достигаю желаемого эффекта.

Так скажем, в моем компоненте под названием blog.js у меня есть

<BgImage image="blog" />

Тогда мой компонент, который должен визуализировать фон, который у меня есть:

import React from 'react';
import styled from 'styled-components';
import blog from '../../static/blog.jpg';
import about from '../../static/about.jpg';
import contact from '../../static/contact.jpg';
import projects from '../../static/projects.jpg';

const BgBackground = styled.div`
  width: 100%;
  height: 400px;
  position: absolute;
  &::after {
    background-size: cover;
    content: "";
    opacity: 0.25;
    height: 400px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
  }
`

class BgImage extends React.Component {
  render() {
    return (
  <BgBackground style={{background: 'url' + this.props.image}} />
    );
  }
}

export default BgImage;

Я не получаю ошибку, но я получаю эти предупреждения, потому что ничего не используется:

3:8  warning  'blog' is defined but never used      no-unused-vars
4:8  warning  'about' is defined but never used     no-unused-vars
5:8  warning  'contact' is defined but never used   no-unused-vars
6:8  warning  'projects' is defined but never used  no-unused-vars

Я в растерянности и не знаю, что делать отсюда. Есть предположения? (Я очень хорошо знаю, что что-то не так или сломано, я просто не могу понять это)

1
sthig 29 Май 2017 в 00:39

2 ответа

Лучший ответ

Попробуй это. Помните, что в React реквизиты заменены на camelCase, поэтому свойства с тире не действуют:

<BgBackground style={{backgroundImage: 'url( "${this.props.image}" )' }} />
1
Chris 28 Май 2017 в 22:34
<BgBackground style={{background-image: 'url( "${this.props.image}" )' }} />
0
Hevar 28 Май 2017 в 22:24