Question

下面的代码显示了一个手风琴，但是我需要利用useContext，我理解它仅适用于功能组件，而我很难理解如何将其转换为功能组件。

class AnnualFeeScreen extends Component {
  state = {
    activeSections: [],
  };

  _renderHeader(section, index, isActive) {
    let meanValStatus = '#39D0B5';
    if (section.meanDiffVal >= 1.05) {
      meanValStatus = '#FCD561';
    } else if (section.meanDiffVal < 0.95) {
      meanValStatus = '#bbb';
    }
    return (
      <View style={styles.flexRow}>
        <View style={{flex:2}}>
          <Text style={styles.h6}>{!isActive ? '+' : '-'} {section.title}</Text>
        </View>
        <View style={styles.flex}>
          <Text style={[styles.h6, {textAlign: 'right'}]}>{Math.round((section.titleValue) / 12, 0)} kr/mån</Text>
        </View>
        <View style={[styles.circleStatus, {backgroundColor: meanValStatus}]}></View>
       </View>
    );
  };

  _renderContent = section => {
    return (
      <View>
        {section.content.map((item, key) =>
          <View style={styles.accordionContent} key={key}>
            <View style={styles.flexRow}>
              <View style={{flex: 2}}>
                <Text style={[styles.p, {fontWeight: 'normal'}]}>{item.title}</Text>
              </View>
              <View style={styles.flex}>
                <Text style={[styles.p, {fontWeight: 'normal', textAlign: 'right'}]}>{Math.round((item.value * aptPercentage) / 12, 0)} kr/mån</Text>
              </View>
            </View>
          </View>
        )}
      </View>
    );
  };

  _updateSections = activeSections => {
    this.setState({ activeSections });
  };

  render () {
    return (
      <ScrollView style={styles.backgroundPrimary} showsVerticalScrollIndicator='false'>
        <View style={styles.backgroundSecondary}>
          <View style={styles.container}>
            <Accordion
              sections={brfCostRows}
              activeSections={this.state.activeSections}
              renderHeader={this._renderHeader}
              renderContent={this._renderContent}
              onChange={this._updateSections}
              sectionContainerStyle={styles.accordion}
              underlayColor='transparent'
            />
          </View>
        </View>
      </ScrollView>
    );
  };
};

要使用axios获取数据，我在其他屏幕中使用了以下内容，但不适用于类组件：

const { state, fetchUser } = useContext(UserContext);

在视图中：

<NavigationEvents onWillFocus={fetchUser} />

我尝试删除渲染部分，将第一部分更改为以下内容，但它抱怨第一个函数_renderHeader（意外令牌）：

const AnnualFeeScreen = () => {

Answer 1

首先，在使用钩子将类组件转换为功能组件时，必须注意，功能组件内部没有this变量。其次，功能组件内部的状态需要使用useState hook

来实现

const AnnualFeeScreen () => {

  const [activeSections, setActiveSections] = useState([]);
  const _renderHeader(section, index, isActive) {
    let meanValStatus = '#39D0B5';
    if (section.meanDiffVal >= 1.05) {
      meanValStatus = '#FCD561';
    } else if (section.meanDiffVal < 0.95) {
      meanValStatus = '#bbb';
    }
    return (
      <View style={styles.flexRow}>
        <View style={{flex:2}}>
          <Text style={styles.h6}>{!isActive ? '+' : '-'} {section.title}</Text>
        </View>
        <View style={styles.flex}>
          <Text style={[styles.h6, {textAlign: 'right'}]}>{Math.round((section.titleValue) / 12, 0)} kr/mån</Text>
        </View>
        <View style={[styles.circleStatus, {backgroundColor: meanValStatus}]}></View>
       </View>
    );
  };

  const _renderContent = section => {
    return (
      <View>
        {section.content.map((item, key) =>
          <View style={styles.accordionContent} key={key}>
            <View style={styles.flexRow}>
              <View style={{flex: 2}}>
                <Text style={[styles.p, {fontWeight: 'normal'}]}>{item.title}</Text>
              </View>
              <View style={styles.flex}>
                <Text style={[styles.p, {fontWeight: 'normal', textAlign: 'right'}]}>{Math.round((item.value * aptPercentage) / 12, 0)} kr/mån</Text>
              </View>
            </View>
          </View>
        )}
      </View>
    );
  };

  const _updateSections = activeSections => {
    setActiveSections(activeSections);
  };

    return (
      <ScrollView style={styles.backgroundPrimary} showsVerticalScrollIndicator='false'>
        <View style={styles.backgroundSecondary}>
          <View style={styles.container}>
            <Accordion
              sections={brfCostRows}
              activeSections={activeSections}
              renderHeader={_renderHeader}
              renderContent={_renderContent}
              onChange={_updateSections}
              sectionContainerStyle={styles.accordion}
              underlayColor='transparent'
            />
          </View>
        </View>
      </ScrollView>
    );
};

将本机类组件手风琴反应为功能组件

1 个答案: