Question

我有一个组件，让我们调用 Screen ，它会导入一个包含搜索结果的组件。 Screen中的一个方法循环遍历一个对象数组，并为每个对象设置一个新的搜索结果组件并将它们存储在一个数组中。

我是React的新手，所以我的问题是，使用import React, { Component } from "react"; import { Text, View } from "react-native"; import SearchResult from "components/SearchResult"; class Screen extends Component { searchResultsComponents = []; submitSearchQuery(searchParam /* Array of objects */) { this.searchResultsComponents = []; for(let result in this.searchResults) { this.searchResultsComponents.push(new SearchResult(this.searchResults[result])); } this.forceUpdate(); }); } render() { return( <View> { this.searchResultsComponents.forEach((it) => { it.render(); }) } </View> ); } } export default Screen;关键字创建扩展Component的类的实例是否正确，或者是否有正确的React方法来执行此操作？如果是这样，在Screen类中呈现这些组件的正确方法是什么，因为我在下面的代码片段中执行此操作的方式似乎不起作用。

Screen.js - 我已经删除了文件以显示我的内容

import React, { Component } from "react";
import { Text, View } from "react-native";


class SearchResult extends Component {
    title;
    setTitle(title) {
        this.title = title;
    }
    getTitle() {
        return this.title;
    }

    description;
    setDescription(description) {
        this.description = description;
    }
    getDescription() {
        return this.description;
    }

    constructor(searchResult) {
        super();
        this.setTitle(searchResult.snippet.title);
        this.setDescription(searchResult.snippet.description)
    }

    render() {
        return(
            <View>
                <Text>{ this.title }</Text>
                <Text>{ this.description }</Text>
            </View>
        );
    }
}

export default SearchResult;

SearchResult.js

// MARK: CrashlyitcsDelegate
func crashlyticsDidDetectReport(forLastExecution report: CLSReport, completionHandler: @escaping (Bool) -> Void) {
    // Last launch we crashed!
    }
}

Answer 1

在你的渲染方法中，正确的方法是：

 { this.searchResultsComponents.map((it, index) => <it key={index} />) }

键是可选的，但建议使用react来提高渲染组件数组时的渲染性能。

有关详细信息，请参阅https://reactjs.org/docs/lists-and-keys.html#basic-list-component。

您的方法不起作用，因为只需调用render方法，函数调用就会返回HTML DOM。但是，您只需调用该函数，不要对返回值执行任何操作。

Answer 2

您的方法不起作用的原因是forEach方法没有返回任何内容。而不是forEach使用map。您修改的行应如下所示：

this.searchResultsComponents.map((component, index) => <View key={index}>{component}</View>);

我将组件包装到View的原因是因为这样每个项目都可以获得recommended when displaying arrays的key属性。

如何在另一个组件的render方法中呈现存储在数组中的React组件

2 个答案: