Reactjs:如何将html模板放在单独的文件中？

Question

我是 React 新手。我对 Angular2+ 更加熟悉。在 Angular 中，每个组件都有一个单独的 html 文件。然而，在 React 中，我看到渲染函数本身包含 html 模板。例如，

import React, { Component } from 'react';

class HelloWorld extends Component {
    render() {
        return (
            <h2> Hello World </h2>
        );
    }
}

export default HelloWorld;

我想拿走

<h2> Hello World </h2>

放在js文件外面并放在单独的html中并导入html文件进行渲染功能，例如

 render() {
            return (
                import content of helloworld.html
            );
        }

你知道怎么做吗？

Answer 1

<小时/>

在 React 中，您通常会创建一个子组件并将其导入到父组件中。

<小时/>

因为这里的子组件只是静态标记即<h2>Hello World</h2> ，您无需担心组件状态。

因此，您可以执行以下操作:

1. 为您的文本创建一个功能性(又名无状态或哑)组件。你可以将其命名为 HelloWorldText举个例子。

2. 将此功能组件导入到您的父组件中 HelloWorld .

<小时/>

你的功能组件看起来像这样:

HelloWorldText.js

const HelloWorldText = () => ( <h2> Hello World </h2> );

export default HelloWorldText;

<小时/>

然后您将导入这个功能组件 HelloWorldText进入你的父组件 HelloWorld像这样:

HelloWorld.js

import React, { Component } from 'react';
import HelloWorldText from './path/to/HelloWorldText';

class HelloWorld extends Component {
  render() {
    return (
      <HelloWorldText />
    );
  }
}

export default HelloWorld;

<小时/>

这是一个 CodePen Demo 使用此代码。

不幸的是，在CodePen上，您无法导出和导入组件，但希望它仍然能让您了解如何在父组件中使用子组件。

<小时/><小时/>

注意:在 React 中，您希望组件尽可能通用。您最终可能会制作 Text组件而不是 HelloWorldText组件。

然后您可以将文本动态传递到 Text组件使用 props .

这是一个 CodePen Demo 这在行动中。