Javascript 如何将类组件转换为函数无状态组件？

我正在尝试将类组件转换为函数组件。但这对我来说有点困难。你能帮我吗

我尝试过这样做，但没有成功：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MovieCardsList from './MovieCardsList';

function (
  props.profiles
  props.movies
  props.users
) {
 return (
      <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">ReactND - Coding Practice</h1>
        </header>
        <h1>How Popular is Your Favorite Movie?</h1>
        <MovieCardsList profiles={profiles} movies={movies} users={users} />
      </div>
    ); 
  }

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./MovieCardsList”导入MovieCardsList；
作用(
道具
道具、电影
道具用户
) {
返回(
反应编码实践
你最喜欢的电影有多受欢迎？
); 
}
导出默认应用程序；

下面是代码的一部分：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MovieCardsList from './MovieCardsList';

class App extends Component {
  render() {
    return (
      <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">ReactND - Coding Practice</h1>
        </header>
        <h1>How Popular is Your Favorite Movie?</h1>
        <MovieCardsList profiles={profiles} movies={movies} users={users} />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./MovieCardsList”导入MovieCardsList；
类应用程序扩展组件{
render（）{
返回(
反应编码实践
你最喜欢的电影有多受欢迎？
);
}
}
导出默认应用程序；

我接近解决方案了吗？谢谢你的帮助。提前感谢。

只需稍作改动：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MovieCardsList from './MovieCardsList';

function App(props) {
   return (
      <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">ReactND - Coding Practice</h1>
        </header>
        <h1>How Popular is Your Favorite Movie?</h1>
        <MovieCardsList profiles={props.profiles} movies={props.movies} users={props.users} />
      </div>
    ); 
  }

export default App;

---

接受道具作为参数：

function App = (props) => {
    cosnt {profiles, movies, users} = props
    return <div/>
}

功能应用=（道具）=>{
cosnt{个人资料、电影、用户}=道具
返回
}

或者马上去构造它们

function App = ({profiles, movies, users}) => {
    return <div/>
}

function-App=（{个人资料、电影、用户}）=>{
返回
}

完整代码：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import MovieCardsList from './MovieCardsList';

function App = ({profiles, movies, users}) => {
    return (
      <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">ReactND - Coding Practice</h1>
        </header>
        <h1>How Popular is Your Favorite Movie?</h1>
        <MovieCardsList profiles={profiles} movies={movies} users={users} />
      </div>
    );
}

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./MovieCardsList”导入MovieCardsList；
功能应用=（{个人资料、电影、用户}）=>{
返回(
反应编码实践
你最喜欢的电影有多受欢迎？
);
}

---

导出默认应用程序

你不必给函数命名吗？函数App（）{…}@skyboyer，可能太简单了。我试试你的建议。迪兰，我用了第一个。成功了。谢谢，没问题！永远记住最基本的。我看到的错误是函数定义（命名函数并正确定义其参数）。祝你好运！我是新来的。我有很多东西要向你们学习，伙计们。你好，欢迎！希望你喜欢。它可以是同等的令人兴奋/奖励，也可以是同等的令人沮丧。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import MovieCardsList from './MovieCardsList';

function App = ({profiles, movies, users}) => {
    return (
      <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">ReactND - Coding Practice</h1>
        </header>
        <h1>How Popular is Your Favorite Movie?</h1>
        <MovieCardsList profiles={profiles} movies={movies} users={users} />
      </div>
    );
}