关于Tabs标签页使用问题

Question

在不切换的情况下，怎样可以通过点击上方的按钮来更新Tab1第一个选项里面内容呢

下面是官方demo代码

https://codesandbox.io/s/ry681pj8vn

<div>
    <Button type="primary">update</Button>
    <Tabs defaultActiveKey="1" onChange={this.callback}>
      <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
      <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
      <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
    </Tabs>
  </div>

Answer 1

...
state = {
    data: 1,
}

onChange = () => {
    this.setState({
        data: 2,
    })
}
...
<div>
    <Button type="primary" onClick={this.onChange}>update</Button>
    <Tabs defaultActiveKey="1" onChange={this.callback}>
      <TabPane tab="Tab 1" key="1">{this.state.data}</TabPane>
      <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
      <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
    </Tabs>
  </div>

Answer 2

提供一个思路；
给TabPane里的组件定义一个refresh的方法，然后通过ref获取组件实例，直接调用refresh()

class Example extends React.Component {
    constructor() {
        super();

        this.myRef = React.createRef();
    }
    
    render() {
        return (
            <div>
                <Button type="primary" onClick={this.onChange}>update</Button>
                <Tabs defaultActiveKey="1" onChange={this.callback}>
                    <TabPane tab="Tab 1" key="1"><comp ref={this.myRef} /></TabPane>
                </Tabs>
            </div>
        )
    }
    
    onChange = () => {
        this.myRef.current.refresh();
    }
}