如何从App.js更新呈现的反应组件的道具？

Z时代
2024-01-10
分类：问答

我有一个阵营组件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组件的功能。

提前致谢！

回答：

当父级将新的（值）道具传递给子级，子级元件将自动调用渲染方法。不需要在子组件内设置一个本地状态来“存储”新的道具。

这里是接收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>

回答：

您可以使用“国家”为您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> 
    ); 
    } 
}