重写香草JavaScript中的React功能组件

Question

我很难理解通过es6在React中的功能组件如何通过将props放置在对象中来获取props作为参数。 这是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

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

它基本上在做什么相当于说

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)); 

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