Question

故事是这样的：我已经在一家公司实习了 3 个半星期（在我第一年的编程学习结束时），我的任务是将自动翻译集成到他们的 React Web 应用程序中，以便它只翻译部分文本（显然，我们不希望翻译名称或产品名称）。

我的问题不是翻译部分，我已经开发了一个可以使用的功能性 REST API。我遇到的问题是我无法找到一种方法来仅从其父级访问子组件的标记部分。我设法在 vanilla js 和简单的 HTML 中使用 document.getElementsByClassName 简单地做到了，但在 React 中没有。

这是我想应用的原则的一个简单示例：

这是包含应用原始文本的组件（您会注意到我计划将翻译器组件称为包装器以访问其子项的内容）。

import React from "react";
import {Translator} from "./Translator.js";

export class Content1 extends React.Component {
  content = (
    <div>
      <p> Hey! Regarde cet article, il a l'air top! </p>
      <p className="translate">
        Hippolyte Romain, né le 28 août 1947 à Paris, est un illustrateur,
        peintre et écrivain français. Il travaille d'abord dans les milieux de
        la mode et de la couture, se spécialisé dans la connaissance du xviiie
        siècle, et sa vie et son travail se partagent entre la France et la
        Chine. Il est le directeur artistique du jardin d'acclimatation de
        Paris.
      </p>
      <p className="translate"> Tu me diras ce que tu en penses! </p>
    </div>
  );

  render() {
    return (
      <Translator>
         {this.content}
      </Translator>
    );
  }
}

在翻译器里面，我想到了使用这样的东西：

import React from "react";

export class Translator extends React.Component {
  originalContent = this.props.children

  arrayToTranslate = originalContent.getElementsByClassName('translate')

  // Here would be all the translating stuff and return arrayToTranslate with translated 
  text inside
  
  for(let i = 0; i < originalContent.getElementsByClassName('translate').length; i++) {
     originalContent.getElementsByClassName('translate')[i] = arrayToTranslate[i]
  }

  render() {
    return (
      {originalContent}
    );
  }
}

我知道 getElementsByClassName 只存在于 'document' DOM 元素，它只是为了让您了解我想如何去做。不幸的是，我找不到任何方法让它工作。

最后一点：这个想法是在我们需要翻译的尽可能多的潜在内容组件上调用我的翻译器组件，以便翻译有点“模块化”。

对不起，如果我没有说清楚，或者这是一个有明显答案的愚蠢问题。我必须在 3 天内从头开始学习 React 才能开始制作它，而且我可能错过了很多可能非常有用的东西。

先谢谢你的回答！如果某些部分不清楚，请告诉我。

Answer 1

也许你可以试试这个。

export default class Translator extends React.Component {
  componentDidMount() {
    this.translator()
  }
  componentDidUpdate() {
    this.translator()
  }
  translator() {
    const arr = document.getElementsByClassName('translate')
    // this is what you need
    console.log(arr)
  }
  render() {
    // children can be content or any React Component
    return this.props.children
  }
}

在 React.js 中：是否可以只访问子组件的一部分？

1 个答案: