jsx 不工作

IT技术 html reactjs jsx
2021-04-13 23:21:12

我在 jsx 中使用   标记，但它没有渲染空间。以下是我的代码的一小段。请帮忙。

var Reporting=React.createClass({

  render: function(){
    return(
      <div style={divPositionReporting}>
          <p>Pricing Reports</p>
          <hr></hr>
          Select Scenario:&nbsp;&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
          Select Takeout Scenario:&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
      </div>
    );
  },

});
6个回答

请参阅：深入了解JSX

尝试： Select Scenario:{'\u00A0'}

或者： <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

或者： <div>&nbsp;</div>

提琴手

更新

看了一些评论，试了一下。我注意到在 JSX 中使用 html 实体可以正常工作（与上述 jsx-gotchas 参考中所述的不同 [也许它已经过时了]）。

所以使用类似: R&amp;D, 会输出：'R&D'。有一个奇怪的行为&nbsp;，导致它以不同的方式呈现，从而使我认为它不起作用：

<div>This works simply:-&nbsp;-</div>
<div>This works simply:- {'\u00A0'}-</div>

产生：

This works simply:- -
This works simply:-  -
值得注意的是，u00A0由于网络钓鱼计划，浏览器将其列入黑名单。kb.mozillazine.org/Network.IDN.blacklist_chars
2021-05-25 23:21:12
@IndraneelBende&nbsp;应该可以正常工作。style 属性中的值存在一些问题。
2021-05-26 23:21:12
@AndrewHill 这个文件是关于域名的，它和 JSX/HTML 有什么关系？
2021-05-28 23:21:12
所以答案是使用对应于 html 实体的 unicode 值并在 javascript 字符串中使用它。谢谢你的帮助。
2021-06-04 23:21:12
<div>Doesn't work: -&nbsp;-</div>对我来说很好用。编辑：嗯，它似乎不是一个不间断的空间。
2021-06-15 23:21:12

{'\u00A0'}工作但很难阅读，所以我把它包装在一个函数组件中：

组件/nbsp.js：

export default () => '\u00A0';

用法：

Hello<Nbsp />world

编写您的jsx代码{ }，如下所示。

<h1>Code {' '}</h1>

您可以在此处输入空格或任何特殊字符。

例如在你的情况下

Select Takeout Scenario:&nbsp;

应该是这样的

Select Takeout Scenario:{' '}

它会起作用。

作为建议，您不应该使用&nbsp添加额外空间，您可以使用css来实现相同的效果。

这只是为了添加空格，但不适用于其他 html 实体
2021-06-01 23:21:12
@TimoSolo 我不鼓励您使用   或上述技术。如果我的不起作用，您可以尝试第一个答案。谢谢。
2021-06-18 23:21:12
“使用 css 来实现相同的效果” - 您可能正在使用不间断空格，因此您的文本不会下降到下一行和包含文本的元素的边界之外。如果您想使用 CSS 属性来执行此操作，那么一种方法是text-overflow: "clip"; overflow: "hidden";. 有一些变体可用。
2021-06-18 23:21:12
这不是一个不间断的空间。
2021-06-19 23:21:12

如果这对您不起作用，请{' '}使用{'\u00A0'}.

{' '}将呈现一个空格，但在某些情况下，当您希望也呈现行高的情况下，您希望在 HTML 元素内有一个没有其他文本的空格，即：<span style={{ lineHeight: '1em' }}>{' '}</span>，在这种情况下，您需要{'\u00A0'}在span 或 HTML 元素。

您可以简单地将其包装为Fragment：

<Fragment>&nbsp;</Fragment>

您甚至可以使用以下方法简化它： <>&nbsp;</>
2021-06-10 23:21:12
其它你可能感兴趣的问题
上一篇当用户未登录时重定向到登录。Reactjs 下一篇构建后 index.html 中的相对路径