javascript - 在ReactJS中添加动态属性

Question

按钮组件，根据父应用程序发送的 prop dataSrc 呈现按钮。

 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>

        );      
    }
}

父组件App将dataSrc发送给Button。

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        const btnSrc = [
            {
                "label":"Save",
                "class":"user_information_save",
                "disabled":false
            },
            {
                "label":"Cancel",
                "class":"userCancel",
                "disabled":false
            }
        ]
        return <Button dataSrc={btnSrc} /> 
    }
}

现在一切都很好。场景如下，App(父)组件中的 btnSrc 看起来类似:

const btnSrc = [
        {
            "label":"Save",
            "class":"user_information_save",
            "disabled":false
        },
        {
            "label":"Cancel",
            "class":"userCancel",
            "disabled":false,
            "data-id": "someID", // this will be dynamic
            "name": "someName" // this will be dynamic
            "onClick": this.someFunctionaName // this will be dynamic
        }
    ]

现在 src 已更改，但在 Button 组件中渲染最近添加的动态数据时没有什么困惑。

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>

        );      
    }
}

我如何将这些动态自定义对象值添加到现有的 Button 组件中，而且我也不知道如何将事件绑定(bind)到 .map 中。 Code Demo

任何帮助都会有帮助。

Answer 1

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

1- 使用 Spread 语法 ...，并将所有传递的值传递到按钮上，这样您就不需要单独定义每个属性。像这样:

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

现在，如果您传递 onClick 那么只有它会被分配，否则不会。

2- 使用解构并分配默认值(如果未从父级传递)。

像这样:

{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>
})} 

<强> Working Example.