在const聲明中使用react prop或html元素

Question

我創建了一個Button組件，該組件根據傳遞的props應用各種樣式和類。 我還希望能夠在道具中指定其他component ，例如react-router的Link 。 嵌套會引起各種問題（單擊填充無效等）。

為此，我接受一個component道具，該component道具將允許這樣做，但是當未設置該道具時，我想使用默認的html <button>元素。

我經常使用|| 當使用自定義組件執行類似操作時，但我似乎無法使其與默認html元素一起使用。

class Button extends PureComponent {
    render() {
        const {
            size,
            width,
            variation,
            disabled,
            loading,
            position,
            children,
            className,
            component,
            ...otherProps
        } = this.props;

        // Here lies the problem, "button" is not defined here, how to use the default html element while not loosing props specified below?
        const Button = component || button; 

        return (
            <Button
                className={classnames(
                    "BUTTON",
                    {
                        [`BUTTON-size--${size}`]: size,
                        [`BUTTON-width--${width}`]: width,
                        [`BUTTON-variation--${variation}`]: variation,
                        [`BUTTON-position--${position}`]: position,
                        "BUTTON-state--disabled": disabled,
                        "BUTTON-state--loading": loading
                    },
                    className
                )}
                disabled={disabled || loading}
                {...otherProps}
            >
                {children}
            </Button>
        );
    }
}

Answer 1

您將需要創建一個匿名組件

嘗試做

const Button = component || (props) => <button {...props}/>

或（如此處其他人所說）

const Button = component || (props) => <input type="button" {...props}/>

或@Joshua Underwood建議

const Button = component || 'button'

Answer 2

在查看material-ui-next ButtonBase組件時，我注意到此問題的方法非常簡單，即只需執行以下操作：

class Button extends PureComponent {
    render() {
        const {
            size,
            width,
            variation,
            disabled,
            loading,
            position,
            children,
            className,
            component,
            ...otherProps
        } = this.props;

        const Component = component;

        return (
            <Component
                className={classnames(
                    "BUTTON",
                    {
                        [`BUTTON-size--${size}`]: size,
                        [`BUTTON-width--${width}`]: width,
                        [`BUTTON-variation--${variation}`]: variation,
                        [`BUTTON-position--${position}`]: position,
                        "BUTTON-state--disabled": disabled,
                        "BUTTON-state--loading": loading
                    },
                    className
                )}
                disabled={disabled || loading}
                {...otherProps}
            >
                {children}
            </Component>
        );
    }
}

Button.propTypes = {
    component: PropTypes.oneOfType([PropTypes.node, PropTypes.oneOf(["a", "button"])]),
    // ... ohter
};

Button.defaultProps = {
    component: "button",
    // ... other
};

export default Button;

請注意，我只是用的component道具用的默認值"button" 。

Answer 3

當您將組件嵌套在Button類中時，您將不會通過props.component來訪問它們， this.props.children以this.props.children訪問它們

也可以使用const Button = component || button; const Button = component || button; button部分必須是有效的react元素，所以

const Button = component || <input type="button">

要么

const Button = component || <button>

Answer 4

如果您希望這樣的多態組件將其UI類作為參數接收，則我不會在其render方法中使用其類名。

 function MySpan(props) { return <h1>Hello, {props.name}</h1>; } class Button extends React.Component { render() { const { name, component } = this.props; return React.createElement( component ? eval(component) : 'button', this.props, `Hello ${name}` ); } } ReactDOM.render( <Button width="200" component="MySpan" name="Blueish" />, document.getElementById('span') ); ReactDOM.render( <Button width="200" name="Blue" />, document.getElementById('button') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <body> <div id="span"></div> <div id="button"></div> </body>