是否可以从 React 的容器内触发包含组件的渲染？

Question

所以我得到了App，它实现了componentDidMount 和render。

App 包含 2 个组件，一个是 AutoComplete 输入，另一个是 CardView。

计划是一旦用户从AutoComplete 列表中选择了一个项目，将其显示在CardView 中

我想知道如何从AutoComplete 事件处理程序中触发CardView 的渲染（即设置它的状态）。

请参阅以下内容：

//愿意在这里触发 CardView 的渲染。

在下面的代码中。

import React, { Component } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AutoComplete from 'material-ui/AutoComplete';


// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

import './App.css';


class App extends Component {
  constructor () {
    super();
    this.state = {accounts: []}
    this.showAccount = this.showAccount.bind(this);
  }

  componentDidMount() {
    this.setState({ accounts: [
      {account_name: "foo", account_id: 1},
      {account_name: "bar", account_id: 2}
    ]})
  }

  showAccount (value) {
    // willing to trigger CardView's render right here.
  }

  render() {
    return (      
      <MuiThemeProvider>
        <div className="App">
        <center>
        <AutoComplete
          floatingLabelText="account name"
          filter={AutoComplete.caseInsensitiveFilter}
          dataSource={this.state.accounts.map((account) => account.account_name)}
          onUpdateInput={this.showAccount}
        /></center>
        <CardView />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 1

根据我对您问题的理解，这是我的回答。

class CardView extends Component {
  constructor() {
    super()
  }

  render() {
    if (this.props.account) {
      return (
        <p>{this.props.account.account_name}</p>
      )
    }
    else {
      return (
        <p>no data</p>
      )
    }

  }
}
  class App extends Component {
  constructor () {
    super();
    this.state = {accounts: [], infoToDisplay: ''}
    this.showAccount = this.showAccount.bind(this);
  }

  componentDidMount() {
    this.setState({ accounts: [
      {account_name: "foo", account_id: 1},
      {account_name: "bar", account_id: 2}
    ]})
  }

  showAccount (value) {
    let infoToDisplay = this.state.infoToDisplay;
    infoToDisplay = value;
    this.setState({infoToDisplay}); 
    // this line will cause a rerender after the user has chosen something
    // from the autoComplete list
  }

  render() {
    return (      
      <MuiThemeProvider>
        <div className="App">
        <center>
        <AutoComplete
          floatingLabelText="account name"
          filter={AutoComplete.caseInsensitiveFilter}
          dataSource={this.state.accounts.map((account) => account.account_name)}
          onUpdateInput={this.showAccount}
        /></center>
        <CardView accounts={this.state.infoToDisplay} /> 
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

我所做的是给应用程序组件状态以跟踪用户的选择。然后我将此状态作为道具传递给卡片组件。 当状态为满时，卡片将显示它，因此在 showAccount 函数中，我在 infoToDisplay 上调用 setState，这会导致另一个渲染，现在卡片的道具将充满最新信息并显示它。

希望这很清楚。