代码之家 › 专栏 › 技术社区 › Ben Swindells

把所有的类名类作为一个道具放到react中是一个好主意吗?

reactjs css html javascript

Ben Swindells · 技术社区 · 7 年前

我只是想知道 className 反应类中道具内的类?这是我目前的密码。

var app = document.getElementById('app');
class App extends React.Component {
   render() {
      return(
         <div>
            <Header navbar="navbar fixed-top navbar-custom"/>
         </div>
      ); 
   }
}

class Header extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return(
         <header>
            <div class={this.props.navbar}>
               <a href="#" class="navbar-brand">Material Site</a>
               <a href="#"><img src="/images/hamburger-icon.png" width="30" height="20"></img></a>
            </div>
         </header>
      );
   }
}

class ChildSidebar extends React.Component {}
ReactDOM.render(<App/>, app);

谢谢你的建设性建议。

5 回复 | 直到 7 年前

Florian Burgevin 7 年前

这主意不错。

只是喜欢用 className 反应属性而不是 class

<header>
    <div className={this.props.navbar}>
                /* Your code */
    </div>
</header>

Saad Maqbool 7 年前

我会说,为什么不在state中实例化一个类对象呢?因此类的属性将在道具中。

Ahsan Sohail 7 年前

这是个好主意吗?对。每次?不我建议您只应在组件在应用程序的全局范围内可重用的情况下执行此操作。在某些情况下,HTML结构通常相同,但类名不同。在这些函数中,可以将类名设置为props(也可以将默认类设置为默认值)。最后,它是一个设计选择,实际上是您需要对组件进行多大程度的泛化有时抽象所有东西意味着您需要管理所有有时可能令人沮丧的东西。

Marcos Gonçalves 7 年前

这可能是个好主意,也可能不是,事实上,一切都取决于实现逻辑。

你总会找到很多方法来实现同一个实现,我想说的最好的一个,就是最多在 SOLID Principles .

让我们看看您公开的同一实现的一些示例:

1)仅显示标题 boolean properties 要定制行为:

const app = document.getElementById('app');
class App extends React.Component {
   render() {
      return(
         <div>
            <Header isFixed isCustom />
         </div>
      ); 
   }
}

class Header extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      const { isFixed, isCustom } = this.props;
      return(
         <header>
            <div className=`navbar ${isFixed ? 'fixed-top' : ''} ${isFixed ? 'navbar-custom' : ''}`>
               <a href="#" className="navbar-brand">Material Site</a>
               <a href="#"><img src="/images/hamburger-icon.png" width="30" height="20"></img></a>
            </div>
         </header>
      );
   }
}

class ChildSidebar extends React.Component {}
ReactDOM.render(<App/>, app);

2)延长 css class 对于不可预测的行为:

const app = document.getElementById('app');
class App extends React.Component {
   render() {
      return(
         <div>
            <Header classExtended='fixed-top' />
         </div>
      ); 
   }
}

class Header extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      const { classExtended } = this.props;
      return(
         <header>
            <div className=`navbar navbar-custom ${classExtended}`>
               <a href="#" className="navbar-brand">Material Site</a>
               <a href="#"><img src="/images/hamburger-icon.png" width="30" height="20"></img></a>
            </div>
         </header>
      );
   }
}

class ChildSidebar extends React.Component {}
ReactDOM.render(<App/>, app);

3)你自己的例子。

最好的案例场景是使用这些案例进行分析,这样可能更适合您的项目需求和生命周期,从而使您能够轻松地重构代码。

Fabian Hinsenkamp 7 年前

要判断这是否是一个好主意,重要的是要考虑在应用程序增长时,将类名作为道具传递的方法在哪里起主导作用。在复杂的应用程序中,您可能最终会在顶级组件中管理数据和类名,并将两者传递给子组件。

然而,数据不是影响你的动态风格的因素吗?

因此,最好在组件中管理类的动态分配,并且只将数据位传递给需要呈现的组件。

长话短说:它不可扩展,所以如果你想构建一个复杂的应用程序就不要这么做。