Question

我不确定为什么不能将扩展数组作为JSX表达式中的属性值传递。

spread运算符解析为一个我认为JSX表达式所期望的值：对表达式求值后的值。

请注意，我正在尝试在JSX的按钮className属性中将数组作为值传播：

....
   render() {
    const {on, className = '', ...props} = this.props
    const btnClassName = [
      className,
      'btn',
      on ? 'btn-on' : 'btn-off',
    ]

    return (
       <button
          className={...btnClassName} // this throws an error
          aria-label="Toggle"
          {...props}
        />
     )
.....

这可以按预期工作：请注意，这里我将数组（在.join（）之后）作为值传递给我的JSX中的按钮className属性：

....
   render() {
    const {on, className = '', ...props} = this.props
    const btnClassName = [
      className,
      'btn',
      on ? 'btn-on' : 'btn-off',
    ].join(' ')

    return (
         <button
          className={btnClassName} // this works as expected
          aria-label="Toggle"
          {...props}
        />
    )
.....

非常感谢

Answer 1

由于预期语法是带有空格分隔的类名的字符串，因此会引发错误。

您可以将一个数组扩展到另一个数组或参数列表中，但不能扩展到字符串变量中。

您需要使用空格将数组连接起来，以获取字符串作为输出并将其作为className传递。

这可能会引起误解，因为当您console.log()将数组与具有相同数组但分布的空格连接在一起时，没有区别。

但这仅仅是因为您正在将数组扩展到console.log()的参数列表中，并且console.log()会在打印每个参数之前用空格分隔它们。

const classes = ['class1', 'class2', 'class3'];

const join = (...args) => args.join(' ');

console.log(...classes); // console.log() joins the arguments with a space automatically
console.log(join(...classes));
console.log(classes.join(' '));

在jsx表达式中使用传播运算符

1 个答案: