Переопределение свойства пользовательского компонента

#reactjs #antd

Вопрос:

Я делаю настройку компонента Tabs в ant.design. У меня были некоторые трудности с реквизитами, но я решил их, прочитав: https://github.com/react-component/collapse/issues/73#issuecomment-323626120

Но у них все еще возникают проблемы с настройкой заголовка вкладки

 <ContainerTabPane {...props} tab="custom title">

Оно должно переопределять свойство tab. Что я делаю не так?

Полный код:

https://codesandbox.io/s/basic-antd4102-forked-1do70?file=/index.js

Ответ №1:

Это не поведение react по умолчанию, но, похоже, это «какая-то магия», с которой работает ant design Tabs . Он просто считывает tab реквизиты, которые получают все дочерние компоненты, и отображает их как заголовок вкладки. Поэтому, если вы замените на this, вы получите аналогичный результат:

   <Tabs defaultActiveKey="1" onChange={callback}>
<div tab="Tab 1" key="1">
  Content of Tab Pane 1
</div>
<div tab="Tab 2" key="2">
  Content of Tab Pane 2
</div>
<div tab="Tab 3" key="3">
  Content of Tab Pane 3
</div>

1. Но как мой пользовательский компонент может изменить tab свойство внутренне?

2. хороший вопрос, возможно, взглянув на их код, но чтобы решить вашу проблему, вы могли бы изменить свойство непосредственно для дочерних элементов вместо пользовательского дочернего компонента

Ответ №2:

Проблема решена. Это было не очевидно, но обсуждение 4853 помогло мне.

 <ContainerTabs defaultActiveKey={defaultActiveKey} onChange={onChange}>
  {children.map((child) => {
    const { key, props } = child;

    return (
      <AntTabs.TabPane key={key} tab="custom title">
        {props.children}
      </AntTabs.TabPane>
    );
  })}
</ContainerTabs>

Полный код:
https://codesandbox.io/s/basic-antd4102-forked-hx1gy?file=/index.js