Question

我有一个具有以下配置的React组件MoviesGallery.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组件的道具而不重新创建组件。由于我已经将componentsWillReceiveProps（）添加到MoviesGallery组件，因此如何在查询＆＃39;单击按钮，它会将新道具传递给已渲染 MoviesGallery，而componentWillReceiveProps（）应该使其重新渲染，因为状态会发生变化。

对于将在渲染的MoviesGallery组件上单击更改道具本身的功能感到困惑。

提前致谢！

Answer 1

您可以使用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>
    );
  }
}

我希望它有所帮助

Answer 2

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

以下是Counter的一个小示例，它接收count道具并显示它，而在这种情况下，父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>

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

2 个答案: