功能组件在反应中有道具吗？

Posted 2023-02-23

【中文标题】功能组件在反应中有道具吗？

【英文标题】：Do functional components have props in react?

【发布时间】：2020-10-13 22:13:10

【问题描述】：

我们能否在 react 的功能组件中使用 props，如果可以，如何使用。 我正在尝试做

console.log(this.props) 

在功能组件中的返回函数上方，但它一直给我错误。

【问题讨论】：

嗨@Salman Ahmed，如果它是基于类的组件，则使用this 访问props，否则直接访问

docs 始终是开始学习的好地方。

这能回答你的问题吗？ React: Passing down props to functional components

【参考方案1】：

是的。您可以像这样直接（使用props）在功能组件中传递道具：

function myFunc(props)
  console.log(props.content);
  return <div>props.content</div>;

假设传入的props有元素content。

澄清一下，函数组件中没有this，因为它们根本不是类！相反，您将props 直接传递到函数中。

事实上，它可能是你在 React 中学习的第一件事。所以如果你是新手，那么我建议the tutorial here。

【参考方案2】：

是的，像这样，

props 作为第一个参数传递给函数组件

export default function Welcome(props) 
  return <h1>Hello, props.name</h1>;

在这里阅读这篇文章，它解释了一切：https://medium.com/@PhilipAndrews/react-how-to-access-props-in-a-functional-component-6bd4200b9e0b

【参考方案3】：

您可以在类组件中访问“this”关键字...尝试如下实现

import React from 'react'

const Printing=(props)=> 
    console.log(props)
    return (
        <div>
            
        </div>
    )

export default Printing