有没有像JSX'部分'

is there such a thing as JSX 'partials'?

本文关键字：部分 JSX 有没有      更新时间：2023-09-26

我现在主要使用Handlebars JS，但我正在研究JSX。是否存在与Handlebars部分等价的JSX？我想知道我是否可以创建一些小的标记，以便在几个不同的JSX视图中重用。

它不提供分部。React:的一些内容

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

一般来说，我的经验法则是，组件应该遵循单一责任或关注点分离的原则。如果某个组件似乎不适合某个组件，那么其他两个组件可能存在问题，也可以重新考虑：）

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

  • 代码气味通常应该以组件的形式结束（一遍又一遍地重复一些东西，等等）
  • 组件通常是表示的或容器化的。后者在应用程序的道具/状态树中具有角色（你永远不会"看到它们"）
  • 根据需要将事物重构为组件；不要一开始就封装所有东西，因为你可能过早地进行了重构，给自己带来了更多的问题
  • 最可重用和解耦的组件就像最好的函数或对象：干净、灵活、可测试，它们确实解决了一个问题

  • 同时，不要疯狂地将所有都变成一个组件。即你（通常）不想要：

    <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')
);

只需为此创建一个组件。组件可以是简单的，也可以是复杂的

示例：

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

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

相关文章：