Question

我很难理解通过es6的React中的功能组件如何通过将它放在一个对象中来将道具作为参数。这是es6功能的一部分吗？或者它是React的一部分，可以神奇地将道具作为参数拉出来，而不必引用this.props...？如果有人可以使用函数（而不是像Babel repl那样的React.createElement）在vanilla js中重写下面的组件，那将非常有帮助。

const Repos = ({repos}) => {
  return (
    <div>
      <h3> User Repos </h3>
      <ul className="list-group">
        {repos.map((repo, index) => {
          return (
            <li className="list-group-item" key={repo.name}>
              <h4><a href={repo.html_url}>{repo.name}</a></h4>
              <p>{repo.description}</p>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

Answer 1

它正在使用destructuring，是的，它是标准的一部分。

它基本上做的是相当于说

const repos = props.repos;

如果您将props作为参数

，那么您将会这样做

const Repos = (props) => {
  const repos = props.repos;
  return (
    <div>
      (...)
    </div>
  )
}

在ES3中，您还必须拼出function关键字并使用var代替const。

var Repos = function(props) {
  var repos = props.repos;
  return (
    <div>
      (...)
    </div>
  )
}

所以唯一的React-magic正在使用JSX在代码中内联标记。

Answer 2

这是一项解构任务，是ES2015规范的一部分。 Repos是一个需要Object的函数。调用Repos时，它会评估解构模式并将结果分配给其单个参数：

const Repos = ({repos}) => {
  return repos;
}

const props = {repos: [1,2,3]};
const foo = {bar: "baz"};

console.log(Repos(props));
console.log(Repos(foo));

属性的名称（repos）和实际传递给Repos的参数的名称是相同的，因为给定的解构模式没有定义不同的（事实上） ({repos})是({repos:repos})）的简写。但是，一个不同的名称可以更清楚地了解幕后发生的事情：

const Repos = ({repos:arg}) => {
  return arg;
}

const props = {repos: [1,2,3]};

console.log(Repos(props));

请注意，这与默认参数无关。

在vanilla javascript

2 个答案: