componentWillMountにインラインスタイルとして使用する関数をアタッチする

私はリアクションを学んでいます。私はランダムに特定の画像を生成するバニラJSの小さな機能を持っています。無作為で、任意の状態（故意に）に保存されていないので、各状態の変化も同様に画像を変更します。これは私が避けようとしているものです。イメージは<body>のインラインスタイルとして使用されるので、私の背景イメージとして使用できます。componentWillMountにインラインスタイルとして使用する関数をアタッチする

myBackgroundの機能をcomponentWillMountに設定すると、コンポーネントがマウントされる直前にレンダリングされますが、私は必要なものを達成することができますが、何がそこにあるかはわかりません。私はthis.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}> 
    ... 
    } 
}

？この動作を処理するにはsetStateを作成する必要はありません。

出典

2016-09-15 Rico Letterman

'this.myBackground //は 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

componentWillMountにインラインスタイルとして使用する関数をアタッチする

答えて

関連する問題