React无状态组件传递数组报错及相关技术问题咨询

嘿，我来帮你拆解这两个问题，都是React里很常见的props和作用域相关的小坑～

问题1：为什么不用解构时，App能直接拿到外部的things变量？ #

这完全是JavaScript作用域链的功劳！当你把App组件写成const App = () => ...时，组件函数内部并没有声明自己的things变量，JS引擎就会沿着作用域链向上查找——刚好你定义的const things = [...]和App函数处于同一模块作用域（也就是App的外部作用域），所以函数内部就能直接访问到这个变量。

不过要提醒一句：这种依赖外部作用域变量的写法并不推荐，它会让组件的复用性和可测试性大打折扣。React的设计理念是组件通过props接收外部数据，这样组件才是独立、可复用的单元。

问题2：调整写法后，解构版本能正常运行吗？ #

当然可以！问题的核心是你没有把things作为props传递给App组件。你看作者的示例里，在渲染IngredientsList时，明确把{items}作为props传了进去：React.createElement(IngredientsList, {items}, null)，但你写的React.createElement(App, null, null)根本没传things这个props，导致组件里解构出来的things是undefined，调用map自然就会报错“not a function”。

只需要修改index.js里的渲染代码，把things作为props传入App：

// index.js 中的渲染代码
ReactDOM.render(React.createElement(App, {things}, null), document.getElementById('root'));

这样App组件里解构出来的{things}就是你定义的数组了，map方法就能正常工作。

另外提个小细节：你在map里把第二个参数命名为value其实不太准确，它是数组的索引，通常我们会命名为index或者i，可读性会更好：

const App = ({things}) => React.createElement("ul",{className: "thingsAndStuff"}, 
  things.map((item, index) => React.createElement("li", {key:index}, item) )
);

内容的提问来源于stack exchange，提问作者coscholl