如果Tab2是当前选中的标签,Tab2在渲染过程中如何知道?

时间:2017-09-14 19:20:45

标签: reactjs blueprintjs

如果Tab2是当前选中的标签,Tab2如何知道?

我想这样做是为了更改标签标题的内容或样式(例如,所选标签的标题是斜体)。

我不想使用onChange并管理Tab2状态,因为Tab2已经知道它自己的状态。

  <Tabs2 id="TabPane">
    <Tab2
      id="TabFirst"
      panel={SomePanel}
    >
      <Text>
       { isCurrentTabId("TabFirst") 
          ? "I am selected!" 
          : "I'm not selected"}
     </Text>
    </Tab2>
    <Tab2 id="TabSecond"/>
  </Tabs2>


const isCurrentTabId = (tabId) => { ??? }; 

什么代码去哪里“???”是

谢谢!

1 个答案:

答案 0 :(得分:2)

我认为你需要重新思考你的方法 父组件应该知道选择了哪个选项卡而不是选项卡本身。

让我们说标签本身会知道它是通过onClick事件还是其他任何方法选择的,然后,你可以按照自己的意愿渲染样式。
现在,当我点击Tab5时会发生什么?它会知道它是选中的标签,但第一个标签呢?谁会通知它它不再被选中了?

我认为所有Tabs的父母都有责任管理谁是所选的标签,父母可以为每个标签传递一个道具,例如isSelected如果选择它就通知它或不。

一个小例子:

&#13;
&#13;
const tabs = [1, 2, 3, 4, 5];


class Tab extends React.Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }


  onClick() {
    const { id, onClick } = this.props;
    onClick(id);
  }

  render() {
    const { id, isSelected } = this.props;
    const css = `tab ${isSelected && 'selected'}`;
    return (
      <div
        className={css}
        onClick={this.onClick}
      >
      Tab - {id}
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 1
    }

    this.onTabChange = this.onTabChange.bind(this);
  }

  onTabChange(id) {
    this.setState({ selectedTab: id });
  }

  render() {
    const { selectedTab } = this.state;
    return (
      <div>
        {
          tabs.map((t, i) => <Tab id={i + 1} isSelected={selectedTab === i + 1} onClick={this.onTabChange} />)
        }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
&#13;
.tab{
  display: inline-block;
  margin: 0 10px;
  width: 60px
  text-align: center;
  cursor: pointer;
}

.selected{
  border: 1px solid #eee;
  box-shadow: 0 0 3px 1px #999;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
&#13;
&#13;
&#13;