是否有可能從React中的Container中觸發Contained Component的渲染？

Question

所以我得到了App，它實現了componentDidMount和render。

應用程序包含2個組件，一個是AutoComplete輸入，另一個是CardView。

的計劃是，一旦用戶已經從AutoComplete列表中選擇一個項目，在CardView

我不知道它顯示我怎麼會引發CardView的渲染（即設置它的狀態）從AutoComplete內事件處理器。

見讀取行：

//願意觸發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函數中我調用setState on infoToDisplay會導致另一個渲染，現在卡的道具將充滿最新信息並顯示它。

希望這是明確的。