がルータ

Question

を反応させ、私はGoogle Doodles reactjsに似たアプリを作っていると私はどこか

私の問題は、私がしたいのスクリーンショットのボタンすなわちのクリックにある立ち往生していますすべての他のコンポーネントをこのコンポーネントで上書きする必要がありますが、同じページに新しいコンポーネントを表示します。

私はリアクションルータを使用していないため、移動するリンクはあまりありません。ここで

は私が FlatButtonをクリックしたときに、私が欲しいマイコード

var CurrentDay = React.createClass({ 
    handleChange:function(){ 
     alert("in handlechange") 
    }, 

    render: function() { 
      //alert("in CurrentDay") 
      var cardStyle = { 
       display: 'block', 
       width: '20vw', 
       transitionDuration: '0.3s', 
       height: '30vw' 
      } 
     return (<div> 
     { 
      this.props.holidays.map(function(holidays,i) { 
      console.log("holdidays date: " + holidays.date); 
      if(holidays.date!="July 31") 
      { 
       //alert(holidays.image); 
       console.log(" IF --- this data : "+this); 
       return  

       <div>els</div>;     
      } 
       else 
        { 
        //alert("in elseeee"); 
        console.log(" this data : "+this); 
        return  <div> 
        <h2 style={{color:'green'}}>Todays event</h2> 
        <div style={{display: 'flex', justifyContent: 'center'}}> 

        <div style={{padding:'20px 35px 20px 35px'}}> 
        <MuiThemeProvider> 
        <Card style={cardStyle}> 
         <CardHeader 
         title="URL Avatar" 
         subtitle="Subtitle" 
         avatar="https://placeimg.com/800/450/nature" 
         /> 
         <CardMedia> 
         <GifPlayer gif="public/images/GuruRamDass.gif" still="public/images/GuruRamDass.jpg" /> 
         </CardMedia> 

         <CardText> 
         <h4 style={{color:'blue'}}>{holidays.occasion}</h4> 
         </CardText> 
         <CardActions> 
<FlatButton label="More About Doodle" onClick={this.handleChange}/> 
         </CardActions> 
        </Card> 
        </MuiThemeProvider> 
        </div> 
        </div> 
        </div>; 
        } 
      }, this) 
     } 
     </div>); 
    } 
    }); 
module.exports.CurrentDay = CurrentDay; 

である私のアプリべきのみディスプレイapp.Isに表示されている他のすべてのコンポーネントを上書きしながら、新しいコンポーネントの可能性のあること反応するルータなしで実現するには？あなたは、アイテムのリストを表示するか、項目選択がある場合は、アイテムの詳細を表示する -

あなたは、単にいくつかのラッパーでローカルな状態を使用することによって、これを達成できる

Answer 1

を案内してください。

class Wrapper extends Component { 
    componentWillMount() { 
    this.setState({ selected: null }); 
    } 

    setSelected = (item) => { 
    this.setState({ selected: item }); 
    }; 

    render() { 
    if (this.state.selected) { 
     return (
     <ItemDetail item={this.state.selected} /> 
    ); 
    } 

    return (
     <ItemList onItemSelect={this.setSelected}> 
     <Item title="Item 1" /> 
     <Item title="Item 2" /> 
     <Item title="Item 3" /> 
     </ItemList> 
    ) 
    } 
} 

これは、任意のナビゲーターの変更とは明らかに動作しません、バックボタンなどのようなものを通じて持続しないだろう、あなたはそれを達成するために、ルーティングのいくつかの並べ替えを使用する必要があります。