Question

请参阅底部的示例！

我可以排除：

type='checkbox'
className={CSS.checkbox + ' ' + CSS.mySpecialCheckbox}

，它可以灵活地：

在checkbox.sass
从父类中提取独特的样式＆＃39;关联的.sass文件，如果它不存在于公共池中（CSS['randomClass']将失败，但该字符串由父级CSS引用转换，并将应用那些风格）

问题是这样 - 有时我们不想将所有道具自动转发到<input>元素，因为React会抛出关于在DOM元素上放置随机属性的警告

是否有任何棘手的方法可以排除某些道具被传递？

我正在考虑使用所有适用的React eventHandlers +输入属性的扩展运算符，但更合理的解决方案是包含所有＆＃39; Real React / DOM属性＆＃39;在一个随机属性中，我不想这样做。

我知道这很令人困惑，但非常感谢帮助。

由于

import React from 'react'
import CSS from '../css/checkbox.sass'

export default class Checkbox extends React.Component {
  render () {
    const className = (
      (CSS.checkbox) + ' ' +
      (CSS[this.props.className] || '') + ' ' +
      (this.props.className || '')
    );

    return (
      <input {...this.props} type='checkbox' className={className} />
    );
  }
}

<Checkbox className='circle' onClick={this.doSomething}>

Answer 1

好的，我是个白痴，我刚刚意识到答案

解决方案是复制this.props，然后简单地delete复制您认为不适用的，但您想要在渲染阶段使用的

类似于我已经声明后覆盖className=的方式，但不是asdfBlahBlah=''而不是有效的，我只需要这样做：

let props = Object.assign({}, this.props);
delete props.asdfBlahBlah

return (<input {...props} type='checkbox' className={className}>)

将所有有效道具传递给孩子的有效方法？

1 个答案: