时间戳

首页 > 解决方案 > 在 ReactJS 中，我将如何使用函数而不是类组件重写以下代码？

javascript - 在 ReactJS 中，我将如何使用函数而不是类组件重写以下代码？

问题描述

我读到可以使用函数或类组件编写 React 代码。例如，下面的代码...

import React from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
  render() {
    return ...;
  }
}

...

...相当于这个。

import React from 'react';

function Test() {
  return ...;
}

...

那么，我将如何重写以下代码来使用该函数呢？

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>

<div id="mydiv"></div>

<script type="text/babel">
class Hello extends React.Component {
  render() {
    return <h1>Hello World!</h1>
  }
}

ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>

</body>
</html>

我尝试了以下方法，但它不起作用。任何指针？

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>

<div id="mydiv"></div>

<script type="text/babel">
function Hello() {
  render() {
    return <h1>Hello World!</h1>
  }
}

ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>

</body>
</html>

标签： javascripthtmlreactjs

解决方案

对于 React 函数式组件，应该这样做：

function Hello() {
  return <h1>Hello World!</h1>
}

不需要使用 render 方法，因为 React 元素直接在 return 语句上呈现。你可以在React官方文档中阅读更多关于功能组件的信息。

推荐阅读