如何从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组件的功能。

提前致谢！

没有办法改变道具*除非*你使用新的道具重新使用它 - 你不能改变道具。当组件被重新渲染时，调用“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>

答

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

我希望它能帮助

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

相关推荐