React Components-HTML模板的存储位置

React Components - Where to store HTML Templates

本文关键字：存储 位置 Components-HTML React      更新时间：2023-09-26

完成新手React，并尝试找出如何加载组件的HTML，而不是将其直接插入到呈现方法中。例如

import React, {Component} from 'react';
export default class Login extends Component { 
  render() {
    return (
       <!-- how can I provide a link to the HTML template for here? -->
    );
  }
}
React没有HTML。您在render方法中编写的JSX实际上被编译成JavaScript。在核心，React组件都是JavaScript。样式也是内联的。React中的组件化很巧妙，因为HTML、CSS、JavaScript（交互）都在一个地方，就像JavaScript一样。

为了插入原始HTML，React有一个属性dangerouslySetInnerHTML。

<div dangerouslySetInnerHTML={createMarkup()} />

如果你想要某种类型的组织，你可以使用变量来设置html，然后将其分配给呈现函数，但React不使用html模板

var hello = React.createClass({
    render: yourVariable
});

我想您可能对JSX的工作方式感到困惑。为了以防万一，我想澄清一下，JSX就是他们所说的"语法糖"，它将React.createElement等React方法转化为类似XML的语法。例如：

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

（来自React文档）

因此，据我所知，JSX语法实际上属于呈现方法。如果你真正想要的是分离和重用纯表示代码的最佳方式，你应该阅读将你的应用程序分离为容器和表示组件

https://medium.com/@learnreact/container-components-c0e67432e005#.dzjqc8yrnhttps://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mn9nf6lz6

无状态/呈现性/Dumb组件只是返回JSX的函数。所以你可以有你的模板组件：

import React from 'react';
//you need to import React to use JSX, as it will be expanded into React.createElement calls...
function Template(props){
    return ( 
       //...your template here... 
     );
}

然后你的班级

import React, {Component} from 'react';
export default class Login extends Component { 
  render() {
    return (<Template {...props}/>);
  }
}
}

有道理吗？

相关文章：