如果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) => { ??? };
什么代码去哪里“???”是
谢谢!
答案 0 :(得分:2)
我认为你需要重新思考你的方法 父组件应该知道选择了哪个选项卡而不是选项卡本身。
让我们说标签本身会知道它是通过onClick
事件还是其他任何方法选择的,然后,你可以按照自己的意愿渲染样式。
现在,当我点击Tab5
时会发生什么?它会知道它是选中的标签,但第一个标签呢?谁会通知它它不再被选中了?
我认为所有Tabs的父母都有责任管理谁是所选的标签,父母可以为每个标签传递一个道具,例如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'));
&#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;