在react中,经常会碰到从后端获取到的一段字符串中包含‘\n’换行符的情况,此时,我们要在dom中渲染该字符串,并让其在换行符的地方实现换行。如果直接去使用jsx语法渲染的话,可能不能如你所愿。
jsx引入了dangerouslySetInnerHTML
下面是react官网对
dangerouslySetInnerHTML的介绍:
dangerouslySetInnerHTML
dangerouslySetInnerHTML
React是
innerHTML
在浏览器DOM中使用的替代品。通常,从代码设置HTML是有风险的,因为很容易无意中将您的用户暴露给
跨站点脚本(XSS)
攻击。因此,您可以直接从React设置HTML,但是您必须键入
dangerouslySetInnerHTML
并使用
__html
键传递对象,以提醒自己这很危险。
例如:
function createMarkup() {
return {__html: 'First \n Second'};
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
上面的代码虽然可以解析出字符串‘First \n Second’中的\n换行符,但如果‘First \n Second’这个字符串是一个变量,我试了一下,并没有解析出换行,而是将\n解析成一个空格,或是将<br />标签解析成[Object],即如:
function createMarkup() {
let str = 'First \n Second'
return {__html: str}; // 这里字符串换成变量表示
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
最终,我在react项目中,并没有使用dangerouslySetInnerHTML属性实现解析\n换行符,我发现,如果是字符串变量中包含\n换行符,只需在css样式中加入whiteSpace: 'pre-wrap'即可实现解析\n换行符。例如:
let str = '要解析出换行符\n要解析出换行符'
// ......
<div style={{whiteSpace: 'pre-wrap'}}>{{str}}</div>
CSS white-space 属性
在react中,经常会碰到从后端获取到的一段字符串中包含‘\n’换行符的情况,此时,我们要在dom中渲染该字符串,并让其在换行符的地方实现换行。如果直接去使用jsx语法渲染的话,可能不能如你所愿。jsx引入了dangerouslySetInnerHTML下面是react官网对dangerouslySetInnerHTML的介绍:dangerouslySetInnerHTMLdang...
Vue 3.0 正式发布了,喜大普奔:beaming_face_with_smiling_eyes:。新的语法又要学习一阵阵,不过需要在生产环境下大面积使用,可能需要等到它的周边工具:vuex,vue-router 等等全部升级完毕。
Vue 3.0 中尤大使用的了新的编译工具 vite,革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档,发现支持 jsx 语法,由于这段时间都是在使用 react 来开发项目,jsx 完全不同的体验,更加的纯粹与灵活。
npm init vite-app vite-vue
cd vite-vue
npm install
npm run dev
我们发现创建的目录解构很简单
使用 JSX
Vue 3.0 直接支持
最近在React项目中,后端返回的字符串中用\n提供给前端进行换行,但是在前端页面并没用实现换行,我在网上查了很多资料,找到很多方法,但是都没有实现换行,最后,我自己无意间通过组合试出来了。
1 首先,对返回的数据中的\n进行处理,用<br/>替换
eg:const info = 'React\n Vue\n Angular';
const replaceInfo = info.replace(/\\n/g, '<br/>);
2 在JSX中,配合dangerousSetIn
在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。
this.state.sourText = <div>这是一段文字</div> ...
render() { return <div>{this.state.sourText}<...
您可以使用 Webpack 中的 babel-loader,将 JSX 文件转换为纯 JavaScript 文件,同时指定一个输出目录,将转换后的文件放在那里。另外,您还需要在 webpack.config.js 文件中配置 entry 和 output 属性。具体操作可参考以下代码:
webpack.config.js 文件:
module.exports = {
entry: './index.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
module: {
rules: [
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
在上述配置中,我们使用 babel-loader 来解析 .jsx 文件,并且只将项目源代码中除了 node_modules 目录以外的文件作为转译对象。转换后的文件将被打包进 dist/bundle.js 文件中。
而在 index.jsx 文件中,您需要按照规范书写 JSX 代码,例如:
import React from 'react';
import ReactDOM from 'react-dom';
const HelloMessage = (props) => {
return <div>Hello {props.name}!</div>;
ReactDOM.render(<HelloMessage name="John" />, document.getElementById('root'));
其中,<HelloMessage /> 将被转换为 React.createElement('HelloMessage', null)的形式。
这样,您就可以顺利的将 JSX 文件重定向到纯 JavaScript 文件,并通过 Webpack 打包输出。
* Source :
* https://segmentfault.com/a/1190000018959389
* https://segmentfault.com/a/1190000017237707
* Usage : <div v-touch-fix />
* Notice : ios 设备中, 元素内的input聚焦唤起键盘导致页面被顶上去的bug,如果还是不行, 那就单独为元素添加一个blur事件并为其使用
setTimeout(function() {
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight))
}, 200)
export default {
bind: (el, binding) => {
el.scrollIntoView()
inserted: (el) => {
el.scrollIntoView()
const ipt = el.querySelectorAll('input')
const ipts = ipt.length
if (!ipts) return
for (let index = 0; index < ipts; index++) {
const element = ipt[index]
element.addEventListener('blur', function(event) {
el.scrollIntoView()
}, false)
[/code]
iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案
健壮男子: