Javascript 在ReactJS中添加动态属性

按钮组件，它根据父应用程序发送的道具数据RC呈现按钮

 export default class Button extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return(
            <div>
                {this.props.dataSrc.map((element, index) => {
                    return <button 
                        key={index}
                        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
                        type="button"
                        disabled={element.disabled}>
                            {element.label}
                    </button>
                })} 

            </div>

        );      
    }
}

现在src已经改变了，但是在按钮组件中没有什么混淆，可以呈现最近添加的动态数据

export default class Button extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return(
            <div>
                {this.props.dataSrc.map((element, index) => {
                    return <button 
                        key={index}
                        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
                        type="button"
                        disabled={element.disabled}

                        //here i want to have those dynamic data "data-id": "someID", "name": "someName" here 
                        // and i want to add onClick also here which will be loaded from btnSrc

                        >
                            {element.label}
                    </button>
                })} 

            </div>

        );      
    }
}

导出默认类按钮扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.dataSrc.map（（元素，索引）=>{
返回
{element.label}
})} 
);      
}
}

如何将这些动态自定义对象值添加到现有的按钮组件中，我也不知道如何将事件绑定到in.map

---

任何帮助都会有帮助

我认为有两种可能的解决方案：

1-使用扩展语法

…

，将所有传递的值传递到按钮上，这样您就不需要单独定义每个属性。像这样：

return <button 
        key={index}
        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
        type="button"
        {...element}
    >
        {element.label}
</button>

{this.props.dataSrc.map((element, index) => {
    const {onClick=null, dataGrid=''} = element;
    return <button 
            key={index}
            className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
            type="button"
            disabled={element.disabled}
            onClick={onClick}
            data-grid={dataGrid}
        >
            {element.label}
    </button>
})} 

返回
{element.label}

现在，如果您通过onClick，那么只有它将被分配，否则不会

2-如果未从父级传递，则使用destructuring并指定默认值

像这样：

return <button 
        key={index}
        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
        type="button"
        {...element}
    >
        {element.label}
</button>

{this.props.dataSrc.map((element, index) => {
    const {onClick=null, dataGrid=''} = element;
    return <button 
            key={index}
            className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
            type="button"
            disabled={element.disabled}
            onClick={onClick}
            data-grid={dataGrid}
        >
            {element.label}
    </button>
})} 

{this.props.dataSrc.map（（元素，索引）=>{
const{onClick=null，dataGrid=''}=element；
返回
{element.label}
})} 

---

这只是一个猜测，但可能您的密钥属性在这里不好，因为当数据更改时，它将具有相同的值。它只表示地图内部的位置，但与条目无关。此外，我不确定，但可能您需要更改组件状态以触发重新招标。