Onclick按钮我想在ReactJS中呈现多个组件？_Reactjs

Onclick按钮我想在ReactJS中呈现多个组件？

reactjs

Onclick按钮我想在ReactJS中呈现多个组件？,reactjs,Reactjs,我制作了Matchinfo组件和导航栏组件。当我点击查看统计信息按钮时，它应该呈现导航栏（这样我们可以导航回主页，反之亦然）和Matchinfo组件 Content.js： import React, { Component } from 'react'; import './content.css'; class Content extends Component { constructor(props){ super(props); this.sta

我制作了Matchinfo组件和导航栏组件。当我点击查看统计信息按钮时，它应该呈现导航栏（这样我们可以导航回主页，反之亦然）和Matchinfo组件

Content.js：

import React, { Component } from 'react';
import './content.css';

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),
        loading:false
      })
    })
    }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div class="col-lg-3">
                    <div id="content">
                        <p class="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div class="stats">
        Button --->                    <button type="button" class="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
        }

    return (
      <div>
          <div class="row">
            {this.renderMatches()}
          </div>


      </div>
    );
  }
}

export default Content;

import React，{Component}来自'React'；
导入“/content.css”；
类内容扩展组件{
建造师（道具）{
超级（道具）；
此.state={
匹配项：[]，
加载：正确
};
}
componentDidMount（）{
获取（'api/匹配项'）
.then（res=>res.json（））
。然后（res=>{
console.log（res）
这是我的国家({
匹配：res.slice（0,16），
加载：错误
})
})
}
renderMatches（）{
返回此.state.matches.map（match=>{
返回(
match{match.id}
{match.team1}
VS
{match.team2}
赢家
{match.winner}
按钮--->查看统计信息
);
})
}
render（）{
if（this.state.loading）{
返回
}
返回(
{this.renderMatches（）}
);
}
}
导出默认内容；

按一下按钮，它应该呈现2个不同的组成部分，我如何才能做到这一点

请参见以下必须渲染的组件：

导航栏组件：

import React, { Component } from 'react';

class Navbar extends Component {

  render() {
    return (
      <div>
          <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Cricket App</a>
                </div>
                <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Navbar;

import React, { Component } from 'react';

class Matchinfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            info:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/match/:match_id')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        info:res,
        loading:false
      })
    })
    }

  render() {

    if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
    }

    const {info} = this.state;

    return (
      <div>
                         <p class="match">MATCH {info.id}</p>
                        <h4>{info.team1}</h4>
                        <p>VS</p>
                        <h4>{info.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{info.winner}</h4>
                        </div>

      </div>
    );
  }
}

export default Matchinfo;

import React，{Component}来自'React'；
类导航栏扩展组件{
render（）{
返回(



);
}
}
导出默认导航栏；

Matchinfo组件：

import React, { Component } from 'react';

class Navbar extends Component {

  render() {
    return (
      <div>
          <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Cricket App</a>
                </div>
                <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Navbar;

import React, { Component } from 'react';

class Matchinfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            info:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/match/:match_id')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        info:res,
        loading:false
      })
    })
    }

  render() {

    if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
    }

    const {info} = this.state;

    return (
      <div>
                         <p class="match">MATCH {info.id}</p>
                        <h4>{info.team1}</h4>
                        <p>VS</p>
                        <h4>{info.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{info.winner}</h4>
                        </div>

      </div>
    );
  }
}

export default Matchinfo;

import React，{Component}来自'React'；
类Matchinfo扩展组件{
建造师（道具）{
超级（道具）；
此.state={
信息：[]，
加载：正确
};
}
componentDidMount（）{
fetch（'api/match/：match\u id'）
.then（res=>res.json（））
。然后（res=>{
console.log（res）
这是我的国家({
信息:res,，
加载：错误
})
})
}
render（）{
if（this.state.loading）{
返回
}
const{info}=this.state；
返回(
匹配{info.id}
{info.team1}
VS
{info.team2}
赢家
{info.winner}
);
}
}
导出默认匹配信息；

有关更多说明的屏幕截图，请参见查看统计按钮（绿色按钮）：

我认为您不需要从app.js调用route来获取MatchInfo。检查下面更新的代码。如果您在上一篇文章中推荐了我的代码，那么当您单击view stats时，您将在页面中看到导航栏。应该行得通

这里的流程是您的内容组件显示视图统计信息，因此在内容中，我通过传递matchId作为道具来调用MaTchInfo组件，MaTchInfo组件通过传递该matchId来获取componentDidMount中的api调用。就这些

import React, { Component } from 'react';
import './content.css';
import MatchInfo './components/MatchInfo'

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true,
            callMatchInfo: false,
            matchId: ''
        };
        this.viwStats = this.viwStats.bind(this);
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),
        loading:false
      })
    })
    }

    viwStats(matchId){
      this.setState({
        callMatchInfo: true,
        matchId: matchId 
      })
    }

    renderMatchInfo(){
      <MatchInfo matchId={this.state.matchId} />
    }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div class="col-lg-3">
                    <div id="content">
                        <p class="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div class="stats">
                          <button type="button" onClick={this.viwStats(match.id)} class="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
        }

    return (
      <div>
          <div class="row">
            {this.renderMatches()}
          </div>
          <div class="row">
            {this.state.callMatchInfo ? this.renderMatchInfo() : ''}
          </div>

      </div>
    );
  }
}

export default Content;