React组件 - 在哪里存储HTML模板

完成新手到React并试图找出如何为组件加载HTML，而不是直接在render方法中插入它。例如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? --> 
    ); 
    } 
}

来源

2016-08-01 user2085143

这个想法是，你把HTML放在渲染方法，例如使用JSX：https://facebook.github.io/react/docs/jsx-in-depth.html – janhartmann

React没有HTML。您在render方法中编写的JSX实际上已编译为JavaScript。在核心上，React组件都是JavaScript。样式也是内联的。 React中的组件整齐，因为HTML，CSS，JavaScript（交互）都在一个地方，就像JavaScript一样。

要插入原始HTML，React的属性为dangerouslySetInnerHTML。

<div dangerouslySetInnerHTML={createMarkup()} />

来源

2016-08-01 17:12:05 vijayst

如果你想要一些类型的组织，你可以使用变量来设置html和然后分配到渲染functionalty，他们的反应不使用HTML模板

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

来源

2016-08-01 17:15:28 delagroove

要明确，“yourVariable”需要是一个返回JSX的函数（不是HTML格式的字符串）。 –

我想你可能对JSX的工作方式感到困惑。只是为了澄清JSX是他们称之为“语法糖”的东西，它将React方法（如React.createElement）转换为类似语法的XML。例如：

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

（从阵营docs）

所以，据我所知，JSX语法实际上属于在渲染方法。如果你真正需要的是分离和再利用纯粹的表象代码的最佳方式，你应该阅读上分离你的应用到集装箱和表象成分

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

无国籍/表象/哑组件只是返回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}/>); 
    } 
} 
}

有道理？

来源

2016-08-01 17:23:04

React组件 - 在哪里存储HTML模板

回答

相关问题