Question

快速提问。我正在学习反应js。

当我们创建一个组件时，我们在render函数中提供要呈现的组件的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模板中的部分。制作复杂的反应组件非常有用，因为您将从代码中删除大的不可读的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>);
  }
}

在reactjs

2 个答案: