Прикрепляющая функция, которая будет использоваться как встроенный стиль для компонентаWillMount

Я изучаю React. У меня есть небольшая функция в ваниле JS, которая случайным образом генерирует данное изображение. Поскольку это случайное и не сохраняется в каком-либо состоянии (намеренно), каждое изменение состояния также меняет образ, чего я пытаюсь избежать. Изображение будет использоваться как встроенный стиль на <body>, поэтому его можно использовать как фоновое изображение.Прикрепляющая функция, которая будет использоваться как встроенный стиль для компонентаWillMount

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

class homePage extends React.Component { 
    constructor() { 
    super() 
    this.state = {} 
    } 

    get myBackground() { 
    const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg'] 
    const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)] 
    const bgImg = {backgroundImage: 'url(' + randomImg + ')'} 

    return bgImg 
    } 

    componentWillMount() { 
    this.myBackground // doesn't work 
    } 

    render() { 

    // with the current status, below image is changed 
    // whenever a given state is changed. It needs to be changed 
    // only right before component is mounted 
    return <body style={this.myBackground}> 
    ... 
    } 
}

Как я могу иметь this.myBackground прикреплены к componentWillMount и все же быть в состоянии использовать его в визуализации? Обратите внимание, что создание setState для обработки этого поведения не ожидается.

источник

2016-09-15 Rico Letterman

'this.myBackground // не work' <- то, что делает это значит? – zerkms

подождите, что вы ожидаете от 'this.myBackground'? – Li357

«не работает» означает, что каждый раз, когда происходит изменение состояния, изображение рандомизируется снова, но оно должно быть случайным только до того, как компонент установлен –

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

Просто измените имя функции getter на что-то еще и сохраните это в свойстве экземпляра или state в componentWillMount.

class homePage extends React.Component { 
    // Rename your getter function! 
    get getNewBackground() { 
    const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg'] 
    const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)] 
    const bgImg = {backgroundImage: 'url(' + randomImg + ')'} 

    return bgImg 
    } 

    componentWillMount() { 
    this.myBackground = this.getNewBackground; 
    } 

    render() { 
    return <body style={this.myBackground}> 
    } 
}

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

class HomePage extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     backgroundImage: this.getNewBackground(), 
    }; 
    } 

    getNewBackground() { 
    const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg']; 
    const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)]; 
    const bgImg = {backgroundImage: 'url(' + randomImg + ')'}; 

    return bgImg; 
    } 

    render() { 
    return <body style={this.state.myBackground}> 
    } 
}

источник

2016-09-15 03:18:04 rclai

Эх, ты меня опустил, а потом передумал? – rclai

Было бы полезно, если бы вы предоставили правильное решение. В противном случае новички последуют этому страшному решению как есть. Да, я передумал, что вы можете улучшить этот мир, улучшив ответ :-) – zerkms

Да, честно говоря, я даже не знаю, почему он даже использовал функцию геттера. – rclai

Прикрепляющая функция, которая будет использоваться как встроенный стиль для компонентаWillMount

ответ

Смежные вопросы