如何从 React 组件返回纯文本

介绍

在本简短指南中，我们将探讨如何从 React 组件返回纯文本以及一些替代方案。现在，在看到本指南的主题后，您一定想知道，为什么？我们为什么需要这个？好吧，有时，为了使我们的代码可重用，我们会创建辅助函数或实用程序函数。有时我们需要在单个组件中使用多个实用程序函数。因此，我们可以将它们封装在组件中，而不是直接导入这些函数。

在本指南中，我们将创建一个组件，根据道具转换文本。

直接进入代码！

App.js

在App.js文件中，我们将导入<TransformText />组件（我们将很快创建）并将文本属性传递给它。

      import React from "react";
import TransformText from "./TransformText";

export default function App() {
  return (
    <div className="App">
      <h1>My App</h1>
      <TransformText text="Hello World!!" />
    </div>
  );
}
    

TransformText.js

在<TransformText />组件中，我们可以将文本转换为大写、切片文本或用另一个字符串替换子文本。所以，让我们为此编写代码。

该组件的基本结构如下。

      import React, { Component } from "react";

class TransformText extends Component {
  state = {
    text: this.props.text
  };

  render() {
    return this.state.text;
  }
}

export default TransformText;
    

现在，在componentDidMount()生命周期方法中，我们将添加根据传递给组件的 props 来转换文本的逻辑。

      // ..

componentDidMount() {
const { uppercase, slice, replace } = this.props;
    if (uppercase) this.setState({ text: this.state.text.toUpperCase() });

    if (slice)
      this.setState({
        text: this.state.text.slice(slice[0], slice[1])
      });

    if (replace)
      this.setState({
        text: this.state.text.replace(replace[0], replace[1])
      });
}

// ..
    

简单回顾一下上面的String方法：

toUpperCase ()方法将字符串转换为大写值。

slice ()方法根据传递的参数，即起始位置和终止位置，返回字符串的提取部分。

replace ()方法用另一个字符串替换字符串中指定的文本。

让我们回到我们的App.js文件并将 props 传递给组件并检查输出。

App.js

      // ..
export default function App() {
  return (
    <div className="App">
      <h1>My App</h1>
      <TransformText text="Hello World!!" uppercase />
    </div>
  );
}
    

让我们检查一下切片变换。

      <TransformText text="Hello World!!" slice={[2, 8]} />
    

同样地，我们可以对替换执行相同的操作。

      <TransformText text="Hello World!!" replace={["Hello", "Hii"]} />
    

完整源代码

本节包含源代码，供您在后续操作过程中遇到困难时参考。

App.js

      import React from "react";
import "./styles.css";
import TransformText from "./TransformText";

export default function App() {
  return (
    <div className="App">
      <h1>My App</h1>
      <TransformText text="Hello World!!" replace={["Hello", "Hii"]} />
    </div>
  );
}
    

TransformText.js

      import React, { Component } from "react";

class TransformText extends Component {
  state = {
    text: this.props.text
  };

  componentDidMount() {
    const { uppercase, slice, replace } = this.props;
    if (uppercase) this.setState({ text: this.state.text.toUpperCase() });

    if (slice)
      this.setState({
        text: this.state.text.slice(slice[0], slice[1])
      });

    if (replace)
      this.setState({
        text: this.state.text.replace(replace[0], replace[1])
      });
  }

  render() {
    return this.state.text;
  }
}

export default TransformText;
    

index.js

      import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
    

结论

组织代码是构建 Web 应用的最重要方面之一。它有助于使代码更易于重用、更易于维护，并且易于团队中的其他开发人员理解。在本指南中，我们能够在另一个组件中处理文本转换，从而使代码可以从父组件访问。希望您喜欢本指南。下次见，祝您编码愉快。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文