Reactjs - 給出錯誤的方法

Question

我試圖顯示一個組件，具體取決於哪個按鈕被點擊，但有這條線的問題。

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

它會拋出一個關於語法錯誤的錯誤。我做錯了什麼，有沒有更好的方式來顯示組件<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不實際的點擊再次綁定它...希望我的例子幫你