Question

我创建了一个Button组件，它根据传递的道具应用各种样式和类。我还希望能够在道具中指定另一个component，例如来自Link的{{1}}。嵌套会导致各种问题（点击填充不起作用等）。

要做到这一点，我会接受一个react-router道具，这将允许这样但是当未设置此道具时，我想使用默认的html component元素。

在使用自定义组件执行类似操作时，我经常使用<button>，但我似乎无法使用默认的html元素。

||

Answer 1

看看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 2

当您在Button类中嵌套组件时，您无法通过props.component访问它们，您可以将它们作为this.props.children

进行访问

另外，对于const Button = component || button;，button部分需要是有效的反应元素，所以

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

或

const Button = component || <button>

Answer 3

如果你想要这样的多态组件接收其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>

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

3 个答案: