Question

为了重用代码，我想从外部函数呈现<SectionList>组件的以下部分：

组件类：

<SectionList
              renderSectionHeader={this._renderBasicInfoSectionHeader}
              sections={[
                {
                  title: profileConstants.BASIC_INFO_DESCRIPTION,
                  data: [{}],
                  renderItem: ({item, index}) =>
                      <View style={{padding: 15, flexDirection: "row"}}>
                        <View style={{flex: 4}}>
                          <ReadMore
                              style={{padding: 5}}
                              numberOfLines={3}
                              renderTruncatedFooter={this._renderTruncatedFooter}
                              renderRevealedFooter={this._renderRevealedFooter}
                              onReady={this._handleTextReady}
                          >
                            <Text style={{padding: 5}}>
                              {this.props.description}
                            </Text>
                          </ReadMore>
                        </View>
                      </View>

                }

我试图通过内部组件函数来呈现它，并且效果很好：

  renderDescription = (description) => { return {
    title: profileConstants.BASIC_INFO_DESCRIPTION,
        data: [{}],
        renderItem: ({item, index}) =>
        <View style={{padding: 15, flexDirection: "row"}}>
          <View style={{flex: 4}}>
            <ReadMore
                style={{padding: 5}}
                numberOfLines={3}
                renderTruncatedFooter={this._renderTruncatedFooter}
                renderRevealedFooter={this._renderRevealedFooter}
                // onReady={handleTextReady}
            >
              <Text style={{padding: 5}}>
                {description}
              </Text>
            </ReadMore>
          </View>
        </View>

  }};

   ...

  render() {
    const description = this.props.description;
    <SectionList
         renderSectionHeader={this._renderBasicInfoSectionHeader}
            sections={[
                this.renderDescription(description),

但是，如果我在其他文件中提取该函数并将其导入到组件中，则它将呈现未定义状态。有解决方案吗？：

../ Common / CommonSections.js：


export const renderDescription = (description) =>  {return {
  title: profileConstants.BASIC_INFO_DESCRIPTION,
  data: [{}],
  renderItem: ({item, index}) =>
      <View style={{padding: 15, flexDirection: "row"}}>
        <View style={{flex: 4}}>
          <ReadMore
              style={{padding: 5}}
              numberOfLines={3}
              renderTruncatedFooter={this._renderTruncatedFooter}
              renderRevealedFooter={this._renderRevealedFooter}
              // onReady={handleTextReady}
          >
            <Text style={{padding: 5}}>
              {description}
            </Text>
          </ReadMore>
        </View>
      </View>

}};

组件：


 import {renderDescription} from "../common/CommonSections";

  render() {
    const description = this.props.description;
    return (
        <View>
          <SectionList
              renderSectionHeader={this._renderBasicInfoSectionHeader}
              sections={[
                renderDescription(description),

Answer 1

关于此代码部分：

export const renderDescription = (description) =>  {return {
  title: profileConstants.BASIC_INFO_DESCRIPTION,
  data: [{}],
  renderItem: ({item, index}) =>
      <View style={{padding: 15, flexDirection: "row"}}>
        <View style={{flex: 4}}>
          <ReadMore
              style={{padding: 5}}
              numberOfLines={3}
              renderTruncatedFooter={this._renderTruncatedFooter}
              renderRevealedFooter={this._renderRevealedFooter}
              // onReady={handleTextReady}
          >
            <Text style={{padding: 5}}>
              {description}
            </Text>
          </ReadMore>
        </View>
      </View>

}};

您是否已使用不同的函数（_renderTruncatedFooter，_renderRevealedFooter），常量（profileConstants）提取了renderDescription，并导入了不同的React-Native组件（View，Text，ReadMore）？

从外部函数反应渲染部分

1 个答案: