Question

按钮组件，它根据父App发送的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组件中，我也不知道如何将事件绑定到.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.

在ReactJS

1 个答案: