在React.js中:是否可以仅访问子组件的一部分？
在React.js中:是否可以仅访问子组件的一部分？
提问于 2021-06-17 16:57:55
故事是这样的:我已经在一家公司实习了三周半(在我第一年的编程学习结束时)，我的任务是在他们的React web应用程序中集成自动翻译，以便它只翻译部分文本(显然，我们不希望名称或产品名称被翻译)。
我遇到的问题不是翻译部分，我已经开发了一个可以使用的函数式REST API。我的问题是，我找不到一种方法，只能从父组件访问子组件的标记部分。我用普通的js和简单的超文本标记语言简单地做到了这一点，但不是在React中。
这里有一个我想要应用的原则的快速示例：
这是包含应用程序原始文本的组件(您会注意到，我计划调用translator组件作为包装器来访问其子组件的内容)。
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，才能开始做这个，而我可能遗漏了很多真正有用的东西。
不过，还是要提前感谢你的回答！如果有些部分不清楚，请告诉我。
Stack Overflow用户
回答已采纳
发布于 2021-06-17 17:23:50
也许你可以试试这种方式。
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
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68016114
复制相关文章
相似问题
腾讯云开发者
