reactjs - 从父组件向子组件添加动态 html 属性 - React.js

Question

子组件:

export default class Button extends React.Component {
constructor(props) {
    super(props);
}
render() {
 return(
        <div className="form-group">
            <button

                // Need to add dynamic html attr here e.x: data-id

                key={index} 
                id={id} 
                className={`btn btn-default ${componentClass ? componentClass : null }`} 
                type="button"
                onClick={this.props.onClick}> 

                {text}

            </button>
        </div>
    );}}

父组件:

import Button from './Button';

Class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="s">
             <Button data-id="exampleData" />  // Need to add data-id attr to child button
            </div>
        );
    }

按钮组件，有自己的默认属性，如上面提到的:id，className，type，onClick

父组件，将调用Button组件并添加一些附加属性，如data-id、onChange。

注意:在搜索了一些想法后，我知道我可以使用如下所示的扩展运算符:

父组件:

let dynamicAttributes = {"data-id":"someString", "data-attr":"someString", "data-url":"someString"};
    return (
        <div className="s">
         <Button dataSrc={ btnSrc } {...dynamicAttributes} />
        </div>
    );

我不知道如何将Button组件中的dynamicAttributes作为html attrib调用

期待一个好的解决方案。提前致谢。

使用 Destructing 和 Babel 显示错误(意外标记)，如下图所示。

注意:已经安装了preset-env和preset-react。

Answer 1

您可以在子组件中使用剩余解构模式。根据documentation

Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.

当你直接将 props 分配给 DOM 元素时，你应该小心地使用剩余解构，因为从 v16 开始 不再对属性进行检查，并且所有属性都允许在 DOM 上传递元素，因此即使不相关，属性也会传递到您可能不希望的 DOM 元素

P.S. Make sure that all properties that you don't want to pass on to the DOM are destructured separately.

示例片段

export default class Button extends React.Component {
  constructor(props) {
      super(props);
  }
  render() {
     const { onClick, dataSrc, ...rest } = this.props;
     return(
          <div className="form-group">
              <button
                  {...rest}
                  key={index} 
                  id={id} 
                  className={`btn btn-default ${componentClass ? componentClass : null }`} 
                  type="button"
                  onClick={onClick}> 

                  {text}

              </button>
          </div>
      );
  }
}