Question

我正在创建一个类似于Google Doodles reactjs的应用程序而且我被困在某个地方

我的问题是单击按钮，即屏幕截图中的我想在同一页面上显示一个新组件，而所有其他组件都应该被此组件覆盖。

我没有使用反应路由器，因为导航的链接不多。

这是我的代码

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;

我希望当我点击 FlatButton 时，我的应用应仅显示新组件，同时覆盖应用中显示的所有其他组件。这是可能实现的没有反应路由器？

请指导

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>
    )
  }
}

这不会通过任何导航器更改而持续存在，而后退按钮等内容显然不起作用，您将不得不使用某种路由来实现此目的。

如何在不使用反应路由器的情况下在reactjs中创建单页应用程序

1 个答案: