有没有像 JSX 'partials' 这样的东西？

Question

我现在主要使用 Handlebars JS，但我正在研究 JSX。是否有与 Handlebars partials 等效的 JSX？我想知道我是否可以创建可以在多个不同 JSX 视图中重用的少量标记。

Answer 1

它不提供部分。关于 React 的一些事情：

• React 不提供任何部分的概念。 React 的基本原子单元是组件。
• 您可以创建一个或多个组件并重新使用它们，而不是传递一个部分。甚至比部分更好，因为它是一个函数，所以它被封装并且可测试！
• 如果标记很小，则应该向上移动到父组件或向下移动到更简单的组件中

一般来说，我的经验法则是组件应该遵循单一职责或关注点分离的原则。如果某个组件似乎不适合某个组件，那么您可能在其他两个组件中遇到了问题，并且也可以重新考虑它们：)

在考虑组件时要遵循的另外几个经验法则：

• 代码异味通常应以组件的形式结束（一遍又一遍地重复某些内容等）
• 组件通常是展示性的或容器化的。后者在应用的 props/state 树中扮演角色（你永远不会“看到它们”）
• 根据需要将事物重构为组件；不要一开始就封装所有东西，因为你可能已经过早地重构并为自己制造了更多问题
• 最可重用和解耦的组件就像最好的函数或对象：干净、灵活、可测试，而且它们确实解决了一个问题

• 同时，不要发疯，把一切变成一个组件。即您（通常）不想要：

  <Letter>R</Letter><Letter>e</Letter><Letter>a</Letter><Letter>c</Letter><Letter>t</Letter>

这是一个非常简单的例子：

'use strict';

const OuterComponent = React.createClass({
  render() {
    return (
        <div>Outer{this.props.children}</div>
    );
  }
});

const ReusableComponent = React.createClass({
  render() {
    return (
        <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div>
    );
  }
});

ReactDOM.render(
  <OuterComponent>
    <ReusableComponent reusable={true}/>
  </OuterComponent>,
  document.getElementById('container')
);

将呈现：

OuterComponent
Am I reusable? Yeah!

但请注意，如果您不使用可变状态（通过 this.state 在组件内提供给您），使用 creatClass 为您提供的可能超出您的需要，您可以轻松地使用有时称为“无状态功能组件”（因为它们是无状态的并且由函数返回）。这些很容易成为隐式返回 JSX 的箭头函数（本质上只是 React.createElement() 生成器）

const OuterComponent = (props) => <div>Outer{this.props.children}</div>;

const ReusableComponent = (props) => <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div>;

ReactDOM.render(
  <OuterComponent>
    <ReusableComponent reusable={true}/>
  </OuterComponent>,
  document.getElementById('container')
);

Answer 2

只需为此创建一个component。组件可以根据您的需要简单或复杂。

例子：

function Badge(props) {
    return <span className="badge">{props.counter}</span>
}

使用相应的.badge CSS 类，这可能是一个非常简单的组件，呈现为带有数字的红色圆圈，并用作<Badge counter={42} />。