比賽後改變父母背景

Question

我是一個非常新的反應... 我有一個父組件，代表我的webapp的背景。當用戶導航到不同的路由時，我使用Match-from react-router來處理。

新的路由呈現PageView組件，我想擁有不同的背景圖片。因此，要做到這一點，我設置它的背景圖像的父母從父傳遞一個函數來他的孩子的道具，然後調用它的孩子從componentDidMount（）

這不工作，並給了我Maximum call stack exceeded錯誤

這裏是我的父組件：

class App extends Component { 
    constructor() { 
    super() 
    this.state = { 
     backgroundImage: '../public/img/initial.jpg' 
    } 

    this.changeBackground = this.changeBackground.bind(this) 
    } 
    changeBackground (backgroundImage) { 
    this.setState({ 
     backgroundImage 
    }) 
    } 
    render() { 
    return (
     <BrowserRouter> 
     <Provider store={store}> 
      <div className='app' style={{backgroundImage: `url(${this.state.backgroundImage})`}}> 
      <div className='overlay'> 
       <Match exactly pattern='/' component={() => <Landing />} 
       /> 
       <Match 
       pattern='/healthcare' 
       component={(props) => <PageView descriptionText='Healthcare Solutions' 
        backgroundImage='../public/img/5.png' changeParentBackground={this.changeBackground} {...props} />} 
       /> 
       <Match 
       pattern='/officeofthefuture' 
       component={(props) => <PageView descriptionText='Office of the Future' 
        backgroundImage='../public/img/1.png' changeParentBackground={this.changeBackground} {...props} />} 
       /> 
      </div> 
      </div> 
     </Provider> 
     </BrowserRouter> 
    ) 
    } 
} 

這裏是我的孩子組成的瀏覽量

class PageView extends Component { 
    componentDidMount() { 
    const { backgroundImage, changeParentBackground } = this.props 
    changeParentBackground(backgroundImage) 
    } 
    render() { 
    const { descriptionText } = this.props 
    console.log(this.props.changeParentBackground) 
    return (
     <div className='outerDiv'> 
     <LeftDesign show /> 
     <RightDesign descriptionText={descriptionText} /> 
     </div> 
    ) 
    } 
} 

RightDesign：

class RightDesign extends Component { 
    render() { 
    const { descriptionText } = this.props 
    return (
     <div className='rightDiv'> 
     <div id='bigCircle'> 
      <div className='bigCircleTextDiv'> 
      <h1 className='bigCircleText'>{descriptionText}</h1> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 

LeftDesign

class LeftDesign extends Component { 
    constructor (props) { 
    super(props) 
    const { show } = this.props 
    this.state = {show} 
    } 
    render() { 
    return (
     <div className='leftDivContainer'> 
     <div className='leftDiv'> 
      {this.state.show && <WelcomeMsg />} 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

我剛纔評論對這樣的解決方案。

它使用CSS背景圖像和轉換來切換圖像，該圖像基於位置路徑名的第二項的字符串，該字符串對應於應用程序的第一級路線。

function getBackground(array) { 
    switch(array[1]) { 
    case 'healthcare': 
    return 'www.foo.com/image/1.jpg'; 
    case 'officeofthefuture': 
    return 'www.foo.com/image/2.jpg'; 
    default: 
    return 'www.foo.com/image/default.jpg' 
    } 
} 

export default class Parent extends Component { 
    render() { 
    let { location } = this.props; 

    // Split the pathname string into an array of sub-paths 
    let locationArray = location ? location.pathname.split('/') : []; 

    // Determine the Background URL 
    let backgroundUrl = getBackground(locationArray); 
    // Define the Parent Style 
    const parentStyle = { 
    transition: 'all 0.2s ease-out', 
    backgroundImage: "url('"+backgroundUrl+"')", 
    backgroundPosition: 'center', 
    backgroundSize: 'contain', 
    backgroundRepeat: 'no-repeat' 
    }; 
    return <div style={parentStyle}> 
      {this.props.children} 
      </div> 
    } 
}