从react对象中提取纯文本

Question

有人知道我如何从react组件中提取纯文本？

示例：

const reactObject = 
<div className="text-primary">
<span>this is a react object, </span>
<b>builded with jsx!!!!</b>
</div>;
.....
//what should I do inside extractText????
const plainText = extractText(reactObject);
alert(reactObject);//result: "[Object object]"
alert(plainText);// must result: "this is a react object builded with jsx!!!!"

Answer 1

如果有人需要，我会写这个递归函数

extractString(obj) {
if (typeof obj === 'string') return obj;
else if (React.isValidElement(obj)) {
return this.extractString(obj.props.children);
} else if (Array.isArray(obj)) {
return obj.map(e => this.extractString(e)).join(' ');
} else return obj.toString();
}

我用这个来显示输入底部的错误消息：

<input ref={.....} value={....} ..... />
<p>{this.props.errorMessage}</p>

BUUUUUT如果用户仍然单击提交按钮。。。我想在默认浏览器错误消息中显示相同的文本，而不重写设置相同的按摩仅一次。

const errorMessage = this.extractString(this.props.errorMessage);
//this is the ref to the input
this.input.current.setCustomValidity(errorMessage);

Answer 2

我真的不知道你为什么需要这个，但就像评论中告诉你的那样，你可以为你的组件使用useRef，如果你非常了解组件结构，你可以得到它的子级并迭代得到innerHTML。如果你需要一个通用的解决方案，你应该提供更多的信息。

以下是一个解决特定问题的stackblitz代码(您可以打开控制台查看日志(：

https://stackblitz.com/edit/react-ts-n47abv?file=index.tsx