我们可以像反应中的道具一样将参数传递给函数和访问吗答案

【问题标题】：Can we pass argument to function & access like a props in react我们可以像反应中的道具一样将参数传递给函数和访问吗
【发布时间】：2021-07-30 03:27:20
【问题描述】：

我最近开始学习 React/JavaScript，我发现传递和访问 props 的方式非常有趣，我尝试在 react 中创建一个类似的 JavaScript 函数，它可以简单地接受参数并且可以访问传递的参数，就像我们在做出反应但无法做到这一点（假设我只想在控制台上记录参数）。

类似这样的：

const fun = ({ name = '', subjects = '', university = '' }) => { 
  console.log('Name       : ', name)
  console.log('Subjects   : ', subjects)
  console.log('University : ', university)
}

反应示例

import React from 'react';

const Comp = ({ name = '', subjects = '', university = '' }) => {
  return (
    <>
      <p>Name : {name}</p>
      <p>Subjects : {subjects}</p>
      <p>University : {university}</p>
    </>
  );
};

const App = () => {
  
  return (
    <>
      <Comp subjects="Computer Science" />
      <Comp subject="Computer Science" name="wasit" />
      <Comp
        subject="Computer Science"
        university="Jamia Millia Islamia"
        location='New Delhi, India'
        name="wasit"
      />
      <Comp
        name="wasit"
        subject="Computer Science"
        university="Jamia Millia Islamia"
      />
    </>
  );
};

export default App;

如果有人能指引我正确的方向，我会感谢你们所有人...

示例代码：

const fun = (name = 'defaultName', subjects = 'defaultSubjects', university = 'defaultUniversity') => {
  console.log('name : ', name)
  console.log('subjects : ', subjects)
  console.log('university : ', university)
}

console.clear()
fun()
console.log('******************************')

fun(name = 'name1')
console.log('******************************')

fun(university = 'university2', name = 'name2')
console.log('******************************')

fun(university = 'university3', subjects = 'subject3', name = 'name3')
// or just simply
// fun('university3', 'subject3', 'name3')
console.log('******************************')

// Error because function is expecting max 3 arguments, which is not the case in react
//fun(university = 'university4', location = 'location4', subjects = 'subject4', name = 'name4')

<!doctype html>
<html lang="en">
<head>
  <title>React VS JS</title>
</head>
<body>
<h1>
Please checkout JavaScript!!
</h1>
</body>
</html>

【问题讨论】：

标签： javascript html reactjs function functional-programming

【解决方案1】：

尝试删除参数外的括号，在“=”标记后的单引号中，您可以在其中设置默认值，如果您在不传递参数的情况下调用函数，您将在控制台中获取默认值.

【讨论】：

只需从函数参数中删除 {}。对于这种情况，您不需要它们。
嗨，@yuanyuan & StamatisDeliyannis 我的主要目的不仅仅是设置参数的默认值，而是可以接受参数函数的顺序和数量，而不使用'_'（下划线），这可以正常处理。请参考我的代码 sn-p jsfiddle，我也将附加有问题的代码 sn-p。
上述评论中的拼写错误：'...（下划线）无法正常处理。'
我猜你可以使用Object.entries()，看看这个页面MDN Object.entries()

【解决方案2】：

由于您的函数需要一个带有“name”、“subjects”和“university”键的对象，因此您需要通过传递一个对象来调用该函数。

对于一个 React 组件，所有的 props 都是“props”对象的一部分。 props 对象具有您传递的键，以及一些 React 组件独有的通用键（如子项）

【讨论】：

【解决方案3】：

您可以遍历对象中的每个键

const print = props => {
    for (let key in props)
        console.log(`${key}: ${props[key]}`);
};

print({name: 'Ken Roczen', number: 94});

// name: Ken Roczen
// number: 94

【讨论】：

是的，上述方法可以是模拟参数/参数的方法之一，如 Props，但我们仍将限于 React Props 的几个功能 例如，解构道具