淘先锋技术网

首页 1 2 3 4 5 6 7

子组件:

export default class Button extends React.Component {

constructor(props) {

super(props);

}

render() {

return(

// 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}

);}}

父组件:

import Button from './Button';

Class App extends React.Component {

constructor(props) {

super(props);

}

render() {

return (

// Need to add data-id attr to child button

);

}

按钮组件,拥有它自己的默认属性,如上所述:id,className,type,onClick

父组件,将调用Button组件并添加一些其他属性,如data-id,onChange。

注意:在搜索了一些想法后,我知道我可以使用如下的传播操作符:

父组件:

let dynamicAttributes = {"data-id":"someString", "data-attr":"someString", "data-url":"someString"};

return (

);

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

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

使用了Destructing和Babel显示错误(意外令牌),如下图所示。

jiTHX.png

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