Question

我正在同时学习react和elm，相似之处让我想知道是否可以编写所有我的react组件，如在代码段中，而不是使用类

import React from 'react';
import './App.css';

export default function App() {
  const [name, setName] = React.useState("oof")

  return (
    <div className="App App-header">
      <Head/>
      <Adorable name={name}/>
      <AdoreForm setName={setName}/>
    </div>
  );
}

const Head = () =>
  <header>Adorable Genator OwO</header>

const Adorable = (props) =>
  <img src={`https://api.adorable.io/avatars/221/${props.name}@adorable.png`}/>

const AdoreForm = (props) =>
  <div>
    <input onChange={(e) => props.setName(e.target.value)}/>
  </div>

Answer 1

是的，您可以按照代码段所示编写代码。您还可以按如下所示使用箭头功能创建应用程序组件。

 const App = () => {
  const [name, setName] = React.useState("oof")

  return (
    <div className="App App-header">
      <Head/>
      <Adorable name={name}/>
      <AdoreForm setName={setName}/>
    </div>
  );

}

export default App;

使用哪种方法（即类或函数）来创建组件都没有关系，尤其是在引入react钩子的情况下。

以功能风格编写React组件

1 个答案: