本文探讨了在React中如何向子组件Button动态传递属性的方法，包括如何使用JSX语法正确地设置这些属性，并解决了在尝试使用ES6特性时遇到的语法错误。
子组件：
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显示错误(意外令牌)，如下图所示。
注意：已经安装了preset-env和preset-react。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
