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

Question

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

Answer 1

只需为此创建一个 component。组件可以像您希望的那样简单或复杂。

示例：

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

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

Answer 2

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

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

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

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

代码异味通常应该以组件的形式结束（一遍又一遍地重复某事，等等）
组件通常是展示性的或容器化的。后者在应用程序的 props/state 树中有角色（你永远不会 "see them"）
根据需要将事物重构为组件；不要一开始就封装所有东西，因为你可能过早地重构并给自己制造了更多问题
最可重用和解耦的组件就像最好的函数或对象：干净、灵活、可测试，并且它们确实解决了一个问题
同时，不要发疯把所有东西都变成一个组件。即你（通常）不想要：

<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 可以提供比您可能需要的更多的功能，您可以很容易地使用有时称为 "stateless functional components" 的东西（因为它们是无状态的并且由函数返回）。这些很容易成为隐式返回 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')
);

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

is there such a thing as JSX 'partials'?

javascript

jsx

handlebars.js

reactjs