reactjs中的Render函数

Question

快速问答。我正在学习react js。

当我们创建一个组件时，我们在render函数中提供要呈现的组件的html模板。到目前为止，我只看到了包含非常小的html片段的小组件，但我想知道如果我们有一个包含大量html模板的组件会发生什么，有没有办法提供一个单独的html文件的路径？或者我们被迫在渲染函数中直接编写所有的html？谢谢!

Answer 1

您应该始终在render函数中编写它。你不是在里面写HTML，你是在写JSX，它被编译成Javascript。像<div className="test">这样的东西会被转换成React.createElement("div", {className: 'test'});。

只要您将大型组件分解为许多较小组件的组合，您就不应该有大小问题。您可以通过在呈现函数中包含其他组件来包含这些组件，例如：<SomeComponent someProp="someVal" />。

Answer 2

你可以把你的渲染函数分成一堆好名字的方法，就像旧的普通html-template中的分词一样。这对制作复杂的react组件很有用，因为您将从代码中删除大量不可读的html-part。

例如，下面是这种方法描述的一些伪代码：

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>);
  }
}