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

发布于08月10日

我还没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
            );
        }

你知道怎么做吗？

推荐答案

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

因为这里的子组件只是静态标记i.e <h2>Hello World</h2>，所以不需要担心组件状态.

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

为文本制作functional(又名stateless或dumb)组件.你可以把它命名为HelloWorldText作为一个例子.
将此functional组件导入父组件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;

这是一个100码.

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

Note:在React中，您希望您的组件尽可能通用.你可能最终会制造Text个组件，而不是HelloWorldText个组件.

然后使用props将文本动态地传递到Text组件中.

下面是100个正在运行的例子.