什么应该是一个React组件，什么应该只是一个HTML？

我正在为我的个人网站创建新主页。我制作了以下笔：Homepage on React #1。什么应该是一个React组件，什么应该只是一个HTML？

我想要的网站使用的反应，不一定是因为它会从中受益，但主要是因为我想学反应。

如果你看一看笔，你可以看到很多组件的看着就像这样：

/** 
* The main title. 
*/ 
const Title =() => <h1 className="Title">Chuckeles</h1>;

或本：

/** 
* The row component. Places items, you guessed it, in a row. 
*/ 
class Row extends React.Component { 

    render() { 
    return <div className="Row">{ this.props.children }</div>; 
    }; 

};

这些组件没有做什么特别的。他们只是隐藏底层的HTML。我的问题是这个。我应该有这样的组件吗？或者我应该只使用HTML标签，比如在标题组件的情况下，使用

<h1 className="Title">Chuckeles</h1>

直接？

来源

2015-12-30 chuckeles

这似乎是这些“小”部件的浪费空间，但事实并非如此。

想象明天的设计师之一想改变你的类标题的。如果它只是一个组件，它可以在那里更改，并且不会有任何“寻找”来查找它的所有用法。而如果你在任何地方都插入了它，这将是一场噩梦。

的基本思想是让你的“最低水平”成分中含有HTML，他们做的“脏”的工作（DOM，样式），你更高的部件应该做的组成和逻辑。

我尽量不要在一个分量混合型HTML标签和其他组件。这使得我有很多小的HTML组件，但它们很容易维护，并且我很好地分离了业务组件和表示组件。

来源

2015-12-30 09:26:48

如何管理如此大量的小组件的CSS？我正在使用CSSModules，我很困惑，因为我看过的例子。我应该有一个'js'文件和一个相应的'scss'文件，或者''每个模块''scss'文件，例如模块：'toolbar.js'，'toolbar-item.js'，'toolbar-dropdown。 js'和一个文件'toolbar.scss'？拥有像一条规则的'css'文件对我来说似乎很奇怪，而且我是完美主义者，我想知道最好的方法:) –

@KamilLatosinski在这一点上我们还没有解决特定的组织。我们仍在弄清楚这一点。 –

你可以去那的做法，但我更喜欢这个道具来传播它喜欢：

return <div {..this.props}>{ this.props.children }</div>;

，然后在div也可以重复使用在其他地方。

来源

2015-12-30 09:04:23

你在这里提到什么是通常被称为哑任何部件或无状态的功能。它们非常好，应该总是比静态html更受欢迎，只要有重用/增强的可能性。

来源

2015-12-30 12:17:01 hazardous

什么应该是一个React组件，什么应该只是一个HTML？

回答

相关问题