1

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) => { ??? };

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

谢谢！

4

1 回答 1

2

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

可以说选项卡本身将知道它是通过onClick事件还是其他方法选择的，那么，您可以按照自己的意愿渲染样式。
现在，当我单击时会发生什么Tab5？它会知道它是选定的选项卡，但是第一个选项卡呢？谁会通知它它不再被选中？

我认为管理谁是选定选项卡是所有选项卡责任的父级，并且父级可以为每个选项卡传递一个道具，isSelected例如通知它是否被选中。

一个小例子： 

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'));
.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;
}
<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>

于 2017-09-14T19:34:31.133 回答