javascript - react : How to pass width as a prop from the component

Question

我正在尝试创建一个组件，它的宽度可以在任何可以使用该组件的地方指定

喜欢:

<Button label="button" width="80%" />

const TestButton = styled.button`
  color: red;
`;

var React = require('react');

var Button = React.createClass({

render: function () {

return (
  <TestButton>{this.props.label}</TestButton>
);
}
});

module.exports = Button;

我怎样才能做到这一点？

Answer 1

您可以将 width 作为 props 传递给按钮组件，例如，

export const Button = (props) => { // Your button component in somewhere
    return (
        <button style={{width: `${props.width}`}}>{props.label}</button>
    )
}

在您的主要组件中导入您的按钮并按您想要的方式工作，如下所示

import Button from 'your_button_component_path';

class RenderButton extends React.Component {
    render() {
        return (
            <Button width="80%" label="Save" />
        );
    }
}