Question

过渡到反应我对jsx中的丑陋布尔逻辑感到惊讶。我已经开始使用以下三个组件。

他们有什么问题？如果它们没有任何问题，为什么它们不会被反应，或者是由每个人都在使用的现有库提供？

组件：

// Simple "if" logic
export const If = ({v, children}) => (v ? children : <div/>)

// "if", "else" logic
export const IfElse = ({v, children}) => {
  if (children.length !== 2) {
    return <div style={{color: 'red'}}>{`IfElse should receive 2 children, not ${children.length}`}</div>
  } else if (v) {
    return children[0]
  } else {
    return children[1]
  }
}

// "if", "elseif", ["elseif"...], "else" logic
export const Switch = ({children}) => {
  // All but the last child of a Switch component must be "If" components
  for (let c of children.slice(0, children.length - 1)) {
    if (c.props.v) {
      return c.props.children
    }
  }
  return children[children.length - 1]
}

使用方法：

const UsageExample = ({foo}) => (
  <div>
    <If v={foo}>
      foo is truey
    </If>
    {/* is equivalent to */}
    {foo && 'foo is true'}

    <IfElse v={foo === 'bar'}>
      <span>foo is equal to 'bar'</span>
      <span>foo doesnt equal 'bar'</span>
    </IfElse>
    {/* is equivalent to */}
    {foo === 'bar' ? 
      <span>foo is equal to 'bar'</span> : 
      <span>foo doesnt equal 'bar'</span>
    }

    <Switch>
      <If v={foo === 'foo'}>
        foo equals 'foo'
      </If>
      <If v={foo === 'bar'}>
        else if foo equals 'bar'
      </If>
      <span>
        else foo is not 'foo' or 'bar'
      </span>
    </Switch>
    {/* no simple equivalent in vanilla jsx AFAIK */}
  </div>
)

你可能会认为这些组件比内联语法更不清晰，更不规范，但对我来说它们更容易阅读。特别是当内部组件很大时。

我最初的假设是，这些组件会导致未显示的子项仍被渲染，然后丢弃结果，但我已经检查过，但这不会发生。

它们看起来好得令人难以置信。

Answer 1

嗯，这取决于你。就If和IfElse而言，我认为JSX的做法很好，只是布尔/三元表达式。不难阅读或理解，因为它们是大多数程序员将遵循的常见表达。如果你制作这些自定义组件，只是意味着有人在阅读你的代码时必须首先解决这些问题，并发现他们真的只是在相同的空间内使用内置的JSX技术来做。

如果您的组件很大，解决方案是拆分或简化它们，而不是添加更多自定义组件，这些组件不会节省行空间或做任何其他事情，使您更容易理解个人（虽然你的选择）。

正如评论所说，如果你想进行某种条件渲染，最好在JSX之外计算，而不是内联所有内容。内联一堆逻辑会让你更难以阅读和膨胀你的JSX。

就易于理解而言，在您的示例中，您使用了很好的组件内容，可以方便地帮助解释组件的功能，例如：

<IfElse v={foo === 'bar'}>
  <span>foo is equal to 'bar'</span>
  <span>foo doesnt equal 'bar'</span>
</IfElse>

内容并不总是暗示组件的作用，它可能是：

<IfElse v={foo === 'bar'}>
  <span>Here's a value</span>
  <span>Here's another value</span>
</IfElse>

很有可能没有代码上下文的人不会猜测它会选择要渲染的子项。但是使用三元运算符，您可以立即知道它的含义，检查条件，如果为真，则首先渲染，否则渲染为秒。

再次，如果您100％确定没有其他人必须以任何方式与您的代码进行交互，那么您可以随心所欲地设置/编写它。请记住，当你做其他人参与的事情时，做很多事情会导致坏习惯。最好坚持简单/普通的做法，除非有充分的理由。

Answer 2

在JSX中通常使用＆amp;＆amp;运算符或三元组直接在JSX中：

{ myBoolExp && <MyComponent> }

或

{ myBoolExp ? <Mycomponent /> : <MyOtherComponent /> }

我认为这是因为普通的javascript因此需要较少的习惯来学习。

React布尔组件：If和IfElse

2 个答案: