[问题]在remax中原先小程序的setData等价行为是setState吗？

[callmeYe]

问题描述 [详细地描述问题，让大家都能理解] 我在使用mini-ali-ui中的tabs组件时（https://opendocs.alipay.com/mini/component-ext/tabs），对于原生的写法如何转化为remax的写法表示非常困惑。有这样两个函数：

handleTabClick({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
  },
  handleTabChange({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
  },

这里面setData中的tabsName我并没有在data中找到对应项，不知道在remax中应如何写。下面贴的代码是我尝试的写法 [如果有必要，展示代码，线上示例，或仓库]

import React, {Fragment, useState} from 'react';
import {View, Text, Image} from 'remax/ali';
import List from 'mini-ali-ui/es/list'
import Tabs from 'mini-ali-ui/es/tabs'
import TabContent from 'mini-ali-ui/es/tabs/tab-content'
import Top from '@components/top/index'
import OverviewCard from '../../../components/overviewCard/index'
import styles from './index.less';

function MyPage(props) {
    const tabs = [
        {
            title: 'tab 1',
            number: '6',
            showBadge: true,
            badge: {
                arrow: true,
                stroke: true,
            },
        },
        {
            title: 'tab 2',
            number: '66',
            showBadge: true,
            badge: {
                arrow: false,
                stroke: true,
            },
        },
        {
            title: 'tab 3',
            number: '99+',
            showBadge: true,
            badge: {
                arrow: true,
            },
        }
    ];

    const [activeTab, setActiveTab] = useState(0);

    const handleTabClick = (index) => {
        setActiveTab(index)
    }
    const handleTabChange = (index) => {
        setActiveTab(index)
    }

    return (
        <View className={styles.container}>
            <Tabs
                tabs={tabs}
                tabsName={activeTab}
                activeTab={activeTab}
                onTabClick={handleTabClick}
                onChange={handleTabChange}
                tabBarUnderlineWidth="40px"
            >
                <TabContent key={0} tabId={0} activeTab={activeTab}>
                    <View style={{height:130}}>高度为 130px</View>
                </TabContent>
                <TabContent key={1} tabId={1} activeTab={activeTab}>
                    <View style={{height:200}}>高度为 200px</View>
                </TabContent>
                <TabContent key={2} tabId={2} activeTab={activeTab}>
                    <View style={{height:300}}>高度为 300px</View>
                </TabContent>
            </Tabs>
        </View>
    );
}

export default MyPage

其他信息 [如截图等其他信息可以贴在这里]

[Darmody]

https://remaxjs.org/guide/implementation-notes 可以看下实现原理。

一般来说你不需要考虑 setData。就按 react 的思路来写就行了。你可以对照想象一下，当你写 react-native 的时候，你也不需要关心底层是怎么 "setData" 的

[callmeYe]

https://remaxjs.org/guide/implementation-notes 可以看下实现原理。

一般来说你不需要考虑 setData。就按 react 的思路来写就行了。你可以对照想象一下，当你写 react-native 的时候，你也不需要关心底层是怎么 "setData" 的

是的，我也不想关心底层是怎么“setData”的，但是我不知道在remax中引入的mini-ali-ui如何使用，如果参照mini-ali-ui的官方文档，那么setData就无法绕过（主要是里面setData设置的是不存在于data列表中的状态值使我很迷惑），我尝试用react的方式实现（见上面代码），但是失败了。

[Darmody]

https://github.com/remaxjs/alipay-api-demo/blob/master/src/pages/components/tabs/index.tsx

[callmeYe]

解决了，多谢！