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模板

回答

相關問題