在 JSX 中混合代码和 html/content 的最佳方式

Question

在渲染方法中我有这样的东西：

<tr><td>Reason</td><td>
  {
      if (@props.result?.job?.result?.reason?)
       @props.result?.job?.result?.reason
      else
        "-"    
   }
</td></tr>

（在 CoffeeScript 中）

我认为将输出（文本）与 {}

中的代码混合是不对的

但是 React 文档似乎表明他们赞成这个：

我们发现这个问题的最佳解决方案是直接从 JavaScript 代码生成 HTML 和组件树，这样您就可以使用真实编程的所有表达能力构建 UI 的语言。 https://facebook.github.io/react/docs/displaying-data.html

所以。这是正确的吗？或者有更好的方法吗？

Answer 1

我猜您想将 JSX 中的 HTML 与 If-else 语句或通用代码分开。好吧，你可以制作一个只有 HTML 的不同函数，并根据 if-else 条件渲染它。例如-

render: function() {
  return (
    <tr>
      <td>Reason</td>
      <td>
        { this.props.results ? this.renderWhenTrue() : this.renderWhenFalse()}       </td>
    </tr>
    )
},

renderWhenTrue: function() {
  return (
    <span> Whatever HTML, when True </span>
  )
},

renderWhenFalse: function() {
  return (
    <span> Whatever HTML, when False </span>
  )
}

使用三元运算符并调用相应的函数。 return 无论 HTML 你需要从这些函数中得到什么，比如 renderWhenFalse 或 renderWhenFalse.

Answer 2

prashant 的例子是正确的。由于 JSX 看起来非常类似于 HTML 恕我直言，在 JSX 中使用条件和迭代是错误的。这样做不仅会降低可读性，还会导致 extending/modifying 现有代码出现问题。您可以使用 ES6 class 方法模块化 JSX 元素，并且可以处理负责该组 JSX 元素的条件。

Here 是在 JSX 中处理此问题的更好指南。

这取决于个人的选择，但更进一步，您可以在许多地方避免 JSX 一起（这将是疯狂的代码量）或混合和匹配 JSX/No JSX。来自 react-without-jsx

的示例代码

const React = require('react');
const {div, h1, ul, li, a} = React.DOM;

const MyElement = React.createClass({
    render() {
        return div({style: {color: 'red'}},
                   h1(null, 'Hello ' + this.props.name),
                   ul(null,
                      li(null, a({href: "http://cnn.com"}, "CNN")),
                      li(null, a({href: "http://bbc.com"}, "BBC"))));
   }
});

在 JSX 中混合代码和 html/content 的最佳方式

Best way of mixing code and html/content in JSX

react-jsx