React：带有道具值的默认初始状态

Question

带有道具值的默认初始状态

activeTab 在TabContext 举行 我无法在此处设置默认状态，因为我不知道如何在 TabContext 组件中访问 Tab 组件的 prop 值。

TabContext.js

const TabContext = createContext();

export function useTab() {
  return useContext(TabContext);
}

const TabProvider = ({ children }) => {
  const [activeTab, setActiveTab] = useState();

  const toggleTab = (title) => {
    setActiveTab(title);
  };

  return (
    <TabContext.Provider value={[activeTab, toggleTab]}>
      {children}
    </TabContext.Provider>
  );
};

export default TabProvider;

用法

<TabProvider>
  <TabContainer>
     <Tab title='One' defaultTab/>
     <Tab title='Two' />
  </TabContainer>
</TabProvider>

Tab 组件

• activeTab状态被useTab()钩子访问
• toggleTab 将状态设置为输入的任何内容。
• 我尝试了useEffect()，但由于状态更改它会创建无限循环，并且activeTab 卡在Tab 组件的title 属性上。

const Tab = ({ title, defaultTab }) => {
  const [activeTab, toggleTab] = useTab();

  useEffect(() => {
    if (defaultTab) {
      toggleTab(title);
    }
  }, []);

  return (
    <div
      className={(activeTab === title ? 'text-blue-600' : 'text-gray-900')}
      onClick={() => {
        toggleTab(title);
      }}
    >
      {title}
    </div>
  );
};

期望结果：activeTab 默认状态是Tab 组件的title 属性值，当它具有defaultTab 属性时，同时允许之后根据点击更改状态。还使defaultTab 下TabContainer 下的选项卡组件之一所需的道具@

Answer 1

Tab 组件是否可以有多个 title 或单个值（如“一”、“二”）？如果是这样，在每个Tab 组件中使用useTab 组件是正确的。如果您尝试选择默认选项卡之一，您可以更改您的 Tab 组件，如下所示：

const Tab = ({ title, defaultTab }) => {
    const [activeTab, toggleTab] = useTab();
    return (
      <div
        className={(activeTab === title || defaultTab ? 'text-blue-600' : 'text-gray-900')}
        onClick={() => {
          toggleTab(title);
        }}
      >
        {title}
      </div>
    );
  };

据我了解，您正在尝试默认选择任何选项卡，然后更改状态。