如何從App.js更新呈現的反應組件的道具？

我有一個陣營組件MoviesGallery.js具有以下配置：如何從App.js更新呈現的反應組件的道具？

class MoviesGallery extends Component { 

    constructor(props) { 
     super(props) 
     this.state = { currentImage: 0 }; 
     this.closeLightbox = this.closeLightbox.bind(this); 
     this.openLightbox = this.openLightbox.bind(this); 
     this.gotoNext = this.gotoNext.bind(this); 
     this.gotoPrevious = this.gotoPrevious.bind(this); 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({movies_genre: nextProps.movies_genre}) 
    }

我已經呈現在我的主App.js組件文件，如下所示：

class App extends Component { 

    render() { 
    return (
     <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
     <div className="App"> 
     <header className="App-header"> 
      <h1 className="App-title">Welcome to React</h1> 
      <RaisedButton primary={true} label="Query" className="header_buttons"/> 
      <RaisedButton secondary={true} label="Reset" className="header_buttons"/> 
     </header> 
     <MoviesGallery/> 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
}

我想更新的道具我的MoviesGallery組件沒有重新創建組件。由於我已經將ComponentWillReceiveProps（）添加到了MoviesGallery組件，因此當我單擊「查詢」按鈕時它將會將新的道具傳遞給 MoviesGallery和componentWillReceiveProps（）會導致它重新呈現國家會改變。

只是混淆了將改變道具自己點擊渲染的MoviesGallery組件的功能。

提前致謝！

來源

2017-12-02 Hasan Jafri

沒有辦法改變道具*除非*你使用新的道具重新使用它 - 你不能改變道具。當組件被重新渲染時，調用「componentWillReceiveProps」。 – Li357

如何使用按鈕點擊新建道具重新渲染它？ –

你沒有發佈'MoviesGallery'的渲染方法，但是當你只是在渲染內部使用道具時，不需要設置本地狀態。當一個組件收到一個新的道具時，它會再次使用新道具調用渲染。 –

當父級將新的（值）道具傳遞給子級，子級元件將自動調用渲染方法。不需要在子組件內設置一個本地狀態來「存儲」新的道具。

這裏是接收count道具，只是其顯示在Counter的一個小例子，而在這種情況下，父App將改變其狀態的值，並通過將新值Counter：

class Counter extends React.Component { 
 
    render() { 
 
    const { count } = this.props; 
 
    return (
 
     <div>{count}</div> 
 
    ); 
 
    } 
 
} 
 

 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     count: 0 
 
    } 
 
    } 
 

 
    onClick =() => { 
 
    this.setState({ count: this.state.count + 1 }); 
 
    } 
 

 

 
    render() { 
 
    const { count } = this.state; 
 
    return (
 
     <div> 
 
     <Counter count={count} /> 
 
     <button onClick={this.onClick}>Add to counter</button> 
 
     </div>); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

來源

2017-12-02 17:05:49

您可以使用「國家」爲您MovieGallery.js props因爲state是改變一個對象，你必須將代碼象下面這樣：

class App extends Component { 
    state = { 
    query : null 
    } 
    myFunction(query){ 
    this.setState({query}); 
    } 
    render() { 
    return (
     <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
     <div className="App"> 
     <header className="App-header"> 
      <h1 className="App-title">Welcome to React</h1> 
      <RaisedButton primary={true} label="Query" className="header_buttons" onClick={this.myFunction = this.myfunction.bind(this)}/> 
      <RaisedButton secondary={true} label="Reset" className="header_buttons"/> 
     </header> 
     <MoviesGallery newProps = {this.state.query}/> 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
}

我希望它能幫助

來源

2017-12-02 17:04:50 shahabvshahabi

如何從App.js更新呈現的反應組件的道具？

回答

相關問題