时间戳

首页 > 解决方案 > 我们可以像反应中的道具一样将参数传递给函数和访问吗

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

问题描述

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

像这样的东西：

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>

标签： javascripthtmlreactjsfunctionfunctional-programming

解决方案

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

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

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

// name: Ken Roczen
// number: 94

推荐阅读