Question

我很反应（仍在学习）。我注意到的一件事是，component始终以HTML（jsx）作为内容返回。

但我想知道是否可以创建仅包含函数的component。例如，在我的footer中，我只有静态内容。只需要纯文本和button即可转到主页。所以这就是我想要做的事情：

的index.html

<body>
    <main id="app"></main>

    <footer id="footer">
        <!-- Some other content -->
        <button onClick={this.onButton}>Home</button>
    </footer>

    <script src="/app/bundle.js"></script>
</body>

Footer.js

class Footer extends React.Component {
    onButton() {
        console.log('Button clicked');
    }

    render() {
        console.log('render');
        return null;
    }
}

render(<Footer/>, window.document.getElementById("footer"));

这样，component会被执行，我可以看到日志，但button中定义的index.html已被删除。

另一方面，如果我从render()删除component，我会收到此错误：

页脚（...）：在返回的组件实例上找不到render方法：您可能忘记定义render。

我之前忘记提及的一件事，也是基于@aks答案的第2项，关于使用plaing html来创建链接，如果我不这样做，它会重新加载整个页面。使用我目前正在使用的React路由器。

因此，例如，如果我使用普通的html在fotter上创建一个链接：

<a href="/contact">Contact</a>

点击链接时，其他所有内容都将重置，因为页面将刷新。

这就是为什么最好只使用组件中的函数而不是使用组件内声明的整个html。

Answer 1

好问题。我将以分数回答你的问题：

渲染方法是必需的方法，你不能没有它，它可以返回null，就像你已经在做的那样。
如果您说您的页脚是静态标记并链接到某个部分，您甚至不需要js文件。这不是必需的。
如果您有大多数其他部件的组件，静态内容可能看起来过于冗长。您可以将这些内容放在Footer组件的render方法中，使index.html非常干净。然后，如果您将来需要更多功能，可以安全地添加它们。

我希望有所帮助！

React渲染组件仅包含函数

1 个答案: