如何通过props和扩展运算符在子组件操作父state，解决传参语法报错问题

你的代码存在两处JS语法错误，触发了引擎的语法校验报错：

1. 对象字面量未用大括号包裹：你将对象的属性扩展、键值对直接写在函数参数列表中，没有用{}包裹成完整的对象结构，JS引擎会把...props.expansion识别为第一个参数，后续的props.key: true识别为非法的第二个参数格式，因此抛出需要逗号的错误。
2. 动态对象属性名未使用方括号包裹：如果要将props.key存储的字符串作为对象的键名，必须使用[props.key]的写法，直接写props.key会被识别为键名为字符串"key"的属性，无法匹配你要修改的目标属性。

你只需要把传递给selectExpansion的参数用大括号包裹，同时给动态键名加上方括号即可，还可以直接对原属性值取反来简化if判断逻辑，修正后的完整代码如下：

const Expansion = (props) => {
  return (
    // unique props.key is the expansion name
    <div className={props.key} onClick={() => {
      // 直接构造新的expansion对象，覆盖对应key的布尔值
      props.selectExpansion({
        ...props.expansion,
        [props.key]: !props.expansion[props.key]
      })
    }}>
      <h1>Expansion</h1>
    </div>
  );
}
 
export default Expansion;

如果你需要保留原来的if分支写法，只需要修改两个参数的包裹结构即可：

if(!props.expansion[props.key]) {
  props.selectExpansion({...props.expansion, [props.key]: true})
} else {
  props.selectExpansion({...props.expansion, [props.key]: false})
}

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