Question

让我们想象一下需要呈现string[][]数据的情况。

我收到了以下代码：

export interface IProps {
    correctAnswers: string[][];
}

public render(): JSX.Element {
    return (
        <div>
            {this.props.correctAnswers.map(this.renderPlaceholderAnswers)}
        </div>
    );
}

private renderPlaceholderAnswers(answers: string[], index: number): JSX.Element {
    const last = this.props.correctAnswers.length - 1;
    const content: Array<JSX.Element | string> = [];

    if (answers.length === 0)
        content.push('JUST A SIMPLE STRING'); //there is no key, as it's a string
    else
        content.push(<SimpleAnswerList key="answers" answers={answers} />); //key to indicate inner array items

    index !== last && content.push(<hr key="divider" />); //key to indicate inner array items

    return (
        <div key={index}>  //key to indicate outer array items
            {content}
        </div>
    );
}

在这种情况下，反应并没有抱怨丢失key道具，这段代码是否有效？

我知道这段代码闻起来，但它仅用于研究目的

Answer 1

这样可行，虽然关于React如何处理DOM中的字符串的官方信息不多，但React's Documentation on Reconciliation and Recursion可能非常有见地。文档中提到key道具对于列表中的所有 React Elements 是必要的，以便有效地区分虚拟DOM。

React最有可能将DOM中的纯字符串视为自己的自足键。很容易判断字符串是否在DOM中发生了变化，因为字符串的存在，位置和/或值会发生变化。

至于我个人的偏好，我通常会偏离这种方法，因为我希望将所有内容都至少包含在<span>中以保持一致。

从反应的角度来看，在一个数组中渲染字符串和反应元素是否可以？

1 个答案: