Question

我必须在我的仪表板上渲染几个标签，我可以在它们之间导航。每个选项卡必须可重复使用。在我的示例代码中，我有2个选项卡，如果单击选项卡，匹配选项卡将呈现。我只是不知道我是否以正确的方式推理。我怎样才能做到这一点？我目前的代码是：

import React, {Component} from 'react';

function SelectTab(props) {
  var tabs = ['Overview', 'Favorites'];
  return (
    <ul>
      {tabs.map(function(tab){
        return (
          <li key={tab} onClick={props.onSelect.bind(null, tab)}>
            {tab}
          </li>
        )
      }, this)}
    </ul>
  )
}
function Content(props) {
  return (
    <div>Content {props.tab}</div>
  )
}
export default class MainContent extends Component {
  constructor(props){
    super(props);
    this.state = {
      selectedTab: 'Overview'
    }
    this.updateTab = this.updateTab.bind(this);
  }
  componentDidMount() {
    this.updateTab(this.state.selectedTab);
  }
  updateTab(tab){
    this.setState(function(){
      return {
        selectedTab: tab
    }
    });
  }
  render(){
    return (
      <div>
        <SelectTab selectedTab={this.state.selectedTab} onSelect={this.updateTab}/>
        <Content tab={this.state.selectedTab}/>
      </div>
    )
  }
}

Answer 1

你做得差不多好。但我宁愿在Content组件中呈现SelectTab作为已经获得selectedTab道具，这样您就可以根据该道具呈现特定内容。另外：

componentDidMount() {
    this.updateTab(this.state.selectedTab);
}

没有必要，因为已经设置了状态。

重构的例子：

import React, { Component } from 'react';

function SelectTab(props) {
  var tabs = ['Overview', 'Favorites'];
  return (
    <div>
      <ul>
        {tabs.map(function (tab) {
          return (
            <li key={tab} onClick={props.onSelect.bind(null, tab)}>
              {tab}
            </li>
          )
        }, this)}
      </ul>
      <Content tab={props.selectedTab}/>
    </div>
  )
}

function Content(props) {
  return <div>Content {props.tab}</div>
}

export default class MainContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'Overview'
    };
    this.updateTab = this.updateTab.bind(this);
  }

  updateTab(tab) {
    this.setState(function () {
      return {
        selectedTab: tab
      }
    });
  }

  render() {
    return <SelectTab selectedTab={this.state.selectedTab} onSelect={this.updateTab}/>;
  }
}

还要记住，通过适当的babel-transpiling，您的代码可以像这样简化：

import React, { Component } from 'react';

const TABS = ['Overview', 'Favorites'];
const SelectTab = ({ selectedTab, onSelect }) => (
  <div>
    <ul>
      {
        TABS.map(
          tab => <li key={tab} onClick={() => onSelect(tab)}> {tab} </li>
        )
      }
    </ul>
    <Content tab={selectedTab}/>
  </div>
);


const Content = ({ tab }) => <div>Content {tab}</div>;

export default class MainContent extends Component {
  state = {
    selectedTab: 'Overview'
  };

  updateTab = tab => this.setState(() => ({ selectedTab: tab }));

  render() {
    return <SelectTab selectedTab={this.state.selectedTab} onSelect={this.updateTab}/>;
  }
}

使用可重用组件呈现仪表板

1 个答案: