Reactjs - エラーを返すメソッド

Question

クリックしたボタンに応じてコンポーネントを表示しようとしていますが、この行に問題があります。

{this.showTab({this.state.active})} 

構文エラーについては、エラーが発生します。何が間違っていて、何かをクリックすることによって、コンポーネントの1つを表示する良い方法があります<Grids />、<Pics />または<Maths />です。

import React, {Component} from 'react'; 
import Pics from './pics'; 
import Grids from './grids'; 
import Maths from './maths'; 
import { ButtonToolbar } from 'react-bootstrap'; 
import { Button } from 'react-bootstrap'; 



export default class Tabs extends Component { 
    constructor(props) { 
    super(); 
    this.state = { 
     count: 0, 
     active: null 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    this.showTab = this.showTab.bind(this); 
    } 

    handleClick(value) { 
    this.setState({ 
     count: this.state.count + 1, 
     active: value 
    }); 
    } 

    showTab(tab) { 
    switch(tab) { 
     case "Grids": 
     return "<Grids />"; 
     break; 
     case "Pics": 
     return "<Pics />"; 
     break; 
     default: 
     return "<Maths />"; 
    } 
    } 

    render() { 
    return (
     <div> 
     <ButtonToolbar> 
      {this.props.tabs.map(listValue => 
      <Button onClick={this.handleClick.bind(this, listValue)}> 
       {listValue} 
      </Button> 
     )} 
     </ButtonToolbar> 

     {this.showTab({this.state.active})} 



     </div> 
    ); 
    } 
} 

Answer 1

これは、あなたが望むものである：

import React, {Component} from 'react'; 
import Pics from './pics'; 
import Grids from './grids'; 
import Maths from './maths'; 
import { ButtonToolbar } from 'react-bootstrap'; 
import { Button } from 'react-bootstrap'; 

export default class Tabs extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     count: 0, 
     active: null 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    this.showTab = this.showTab.bind(this); 
    } 

    handleClick(value) { 
    this.setState({ 
     count: this.state.count + 1, 
     active: value 
    }); 
    } 

    showTab(tab) { 
    switch (tab) { 
     case 'Grids': 
     return <Grids />; 
     case 'Pics': 
     return <Pics />; 
     default: 
     return <Maths />; 
    } 
    } 

    render() { 
    const { tabs } = this.props; 
    const { active } = this.state; 
    return (
     <div> 
     <ButtonToolbar> 
      {tabs.map(listValue => 
      <Button onClick={() => this.handleClick(listValue)}> 
       {listValue} 
      </Button> 
     )} 
     </ButtonToolbar> 
     {this.showTab(active)} 
     </div> 
    ); 
    } 
} 

注分割代入が読みやすいコンポーネントを保つことができますか。例const { tabs } = this.props;""の代わりに一重引用符を使用していますが、マークアップには引用符は必要ありません。矢印関数onClickの使い方を見てください。あなたが既にコンストラクタのonClickをバインドしているので、実際のクリックで再びバインドしないでください。私の例があなたを助けてくれることを願っています。