Question

我有一个渲染句子的组件，但是它也翻译句子，并且可以在结果元素中插入标签。它具有以下一般结构：

import React from 'react';
import langFile from 'file_with_sentences.lang';
import TranslateAndInsert from 'translator';

class SentenceRenderer extends React.Component {
    render() {
        let sentenceToTranslate = langFile.sentence;
        let tagToInsert = <a>See more</a>;
        return (
            <p>
                {TranslateAndInsert(sentenceToTranslate, tagToInsert)}
            </p>
        )
    }
}

export default SentenceRenderer

例如，sentenceToTranslate可能是带有占位符的句子，而该占位符被tagToInsert取代。 "I am a sentence to translate looks at me {$0}"和{$0}之类的东西将被<a>See more</a>取代。

我希望能够泛化此组件，以便与其硬编码langFile以从中提取句子，而取一个文件来从中提取句子。您可以将文件作为道具传递吗？可以用更高阶的组件完成吗？

Answer 1

您可以执行动态导入。您可以向下传递文件路径作为道具。然后执行以下操作：

componentDidMount() {
    const { path } = this.props;
    import(`${path}`)
      .then(module => this.setState({ module: module.default }))
  }

这应该允许您访问状态，然后在其周围应用实用程序功能。

接受文件作为道具

1 个答案: