我试图在JSX内部使用pre标记.在JSX中使用pre标记时,它根本不会格式化.为什么?为了使用pre标签,我需要做如下操作:

const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
  <div dangerouslySetInnerHTML={ preBlock } />;
)

为什么?

推荐答案

使用模板文本

Template literals允许使用多行字符串,保留前导/尾随空白和新行.

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
            Hello   ,   
            World   .
          `}</pre>
        )
    }
}

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
            Hello   ,   
            World   .
          `}</pre>
        )
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('pre')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>

<!-- The content rendered into this tag should match the content below. -->
<div id="pre"></div>

<pre>
            Hello   ,
            World   .
</pre>

Reactjs相关问答推荐

如何设置项目库中每个项目的路由?

实时收听react前端应用程序中的webhook响应

React onKeyUp不一致地使用快速Shift+键按压

从`redux—thunk`导入thunk `在stackblitz中不起作用

CreateBrowserRouter将props 传递给父组件以验证权限

关于同一位置的不同组件实例的react S规则被视为相同组件

Reaction-Query&-使用Mutation触发成功,而应该触发错误

当我try 部署我的Reaction应用程序时,为什么在此PrevState语句中收到语法错误?

当项目开始时,它不会从三元运算符(REACT)加载一些tailwind 类名称

用于获取带有事件处理程序的API的动态路由

React-React中是否完全支持基于类的组件?

React 在第一次渲染时为 null

useEffect 和 ReactStrictMode

如何在使用 React Router v6 将当前页面的状态传递给上一页的同时导航到上一页?

使用 react pro 侧边栏展开折叠菜单

从服务器获取数据时未定义,错误非法调用

React:如何设置光标 Select

未捕获的类型错误:useSelector 不是函数

React Router 6.4CreateBrowserRouter子元素不显示

在 redux 状态更改时更新react 按钮禁用状态