呈現功能在reactjs

Question

快速的問題。我正在學習反應js。

當我們創建一個組件時，我們在渲染函數中提供了要渲染的組件的html模板。 到目前爲止，我只看到很小的HTML組件，但我只是想知道如果我們有一個巨大的HTML模板的組件，有什麼辦法可以提供一個單獨的HTML文件的路徑？或者我們被迫直接在render函數中寫入所有的html？謝謝！

Answer 1

你應該總是把它寫在渲染函數中。您不是在那裏寫HTML，而是編寫JSX，它被編譯成Javascript。像<div className="test">這樣的東西被轉換爲React.createElement("div", {className: 'test'});。

只要將大型組件分解爲許多較小組件的組合，就不應該有大小問題。您可以通過將其包含在渲染函數中來包含其他組件，如下所示：<SomeComponent someProp="someVal" />。

Answer 2

你可以將你的渲染函數分割成一堆好命名的方法，比如舊的純html模板中的partials。製作複雜的反應組件非常有用，因爲您會從代碼中刪除大量不可讀的html部分。

例如，這裏是一些僞代碼描述該方法：

class NavBar extends React.Component { 

    // Render user name and links on profile and logout 
    renderUser() { 
    if (!user) return; 
    return <div>{user.name}</div>; 
    } 

    // Render list with nav-bar items if they exists 
    renderNavBarItems() { 
    if (!user) return; 
    return <ul>{this.items.map((i) <li><a href={i.link}>{i.name}</a></li>)}</ul>; 
    } 

    render() { 
    return (<div className="nav-bar"> 
     {this.renderNavBarItems()} 
     {this.renderUser()} 
    </div>); 
    } 
}