React组件如何使用引导响应列

Question

假设我们想要一个像这样的可重用组件：

render: function () {
    return (
    <div className="form-group">
        <label className="col-md-3 col-sm-4">
        <div className="col-md-9 col-sm-8">
            <input type="text" className="form-control" />
        </div>
    </div>
    );
}

显然，className是特定于设计的。我认为该组件应该至少知道设计。

但是，如果我在这样渲染时设置道具：

<C class1="form-group" class2="col-md-3 col-sm-4" class3="col-md-9 col-sm-8" class4="form-control">

这是如此冗长和不可维护。那么在做响应式课程时你的做法是什么？