transform react code to json schema of React style
npm i react2schema -S
// nodejs env
const react2schema = require('react2schema/lib/node');
// web env
// const react2schema = require('react2schema/lib/web');
console.log(react2schema(getCode()));
function getCode(){
return `import React, { Component } from 'react';
export default class About extends Component {
static displayName = 'About';
static propTypes = {};
static defaultProps = {};
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div style={styles.container}>
<div style={styles.content}>
<div style={styles.mainTitle}>ABOUT</div>
<div style={styles.mainDesc}>关于阿里云</div>
<div style={styles.tab}>
<div
style={{ ...styles.tabName, ...styles.first, ...styles.active }}
>
企业级
</div>
<div style={{ ...styles.tabName }}>个人级</div>
</div>
<div style={styles.items}>
<div>
<div style={styles.tabList} key="0">
<div style={styles.left}>
<div style={styles.num}>123</div>
<div style={styles.title}>云存储特惠</div>
</div>
<div style={styles.middle}>
<div style={styles.desc}>
上云仅33元/年,降低企业成本
</div>
</div>
<div style={styles.btnBox}>
<a href="#" style={styles.btnLink}>
查看详情
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
const styles = {
container: {
padding: '50px 0',
background: '#000',
},
content: {
width: '1200px',
margin: '0 auto',
position: 'relative',
},
mainTitle: {
fontSize: '60px',
color: '#fff',
letterSpacing: '0.77px',
lineHeight: '72px',
margin: '0',
fontWeight: '700',
},
mainDesc: {
fontSize: '24px',
lineHeight: '30px',
color: '#fff',
marginTop: '8px',
fontWeight: '700',
},
img: {
marginTop: '70px',
maxWidth: '100%',
},
tab: {
position: 'absolute',
right: '10px',
top: '66px',
overflow: 'hidden',
},
first: {
marginTop: '0',
},
active: {
color: '#fff',
borderBottom: '1px solid #fff',
},
tabName: {
float: 'left',
cursor: 'pointer',
fontSize: '26px',
lineHeight: '30px',
color: 'hsla(0,0%,100%,.5)',
marginLeft: '30px',
padding: '14px 0',
borderBottom: '1px solid transparent',
transition: 'all .3s',
},
items: {
overflow: 'hidden',
paddingTop: '50px',
},
tabList: {
height: '80px',
background: '#191a1e',
position: 'relative',
paddingRight: '40px',
marginTop: '20px',
transition: 'all .3s',
},
middle: {
paddingLeft: '335px',
paddingRight: '180px',
height: '80px',
overflow: 'hidden',
},
left: {
position: 'absolute',
left: '0',
top: '0',
height: '80px',
overflow: 'hidden',
},
num: {
float: 'left',
fontSize: '42px',
width: '80px',
height: '80px',
lineHeight: '80px',
fontWeight: '700',
color: '#fff',
textAlign: 'center',
background: '#236cff',
},
title: {
float: 'left',
maxWidth: '255px',
fontSize: '20px',
lineHeight: '80px',
color: '#fff',
paddingLeft: '40px',
whiteSpace: 'nowrap',
overflow: 'hidden',
},
desc: {
fontSize: '14px',
lineHeight: '24px',
color: 'hsla(0,0%,100%,.8)',
marginTop: '28px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
btnBox: {
position: 'absolute',
right: '40px',
top: '20px',
},
btnLink: {
display: 'inline-block',
width: '160px',
height: '40px',
border: '1px solid #fff',
lineHeight: '38px',
fontSize: '16px',
color: '#fff',
textDecoration: 'none',
textAlign: 'center',
transition: 'all .3s',
},
};
`;
}
output json below
{"component":"div","props":{"style":{"padding":"50px 0","background":"#000"}},"children":[{"component":"div","props":{"style":{"width":"1200px","margin":"0 auto","position":"relative"}},"children":[{"component":"div","props":{"style":{"fontSize":"60px","color":"#fff","letterSpacing":"0.77px","lineHeight":"72px","margin":"0","fontWeight":"700"},"data_text":"ABOUT"},"children":[]},{"component":"div","props":{"style":{"fontSize":"24px","lineHeight":"30px","color":"#fff","marginTop":"8px","fontWeight":"700"},"data_text":"关于阿里云"},"children":[]},{"component":"div","props":{"style":{"position":"absolute","right":"10px","top":"66px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","cursor":"pointer","fontSize":"26px","lineHeight":"30px","color":"hsla(0,0%,100%,.5)","marginLeft":"30px","padding":"14px 0","borderBottom":"1px solid transparent","transition":"all .3s"},"data_text":"企业级"},"children":[]},{"component":"div","props":{"style":{"float":"left","cursor":"pointer","fontSize":"26px","lineHeight":"30px","color":"hsla(0,0%,100%,.5)","marginLeft":"30px","padding":"14px 0","borderBottom":"1px solid transparent","transition":"all .3s"},"data_text":"个人级"},"children":[]}]},{"component":"div","props":{"style":{"overflow":"hidden","paddingTop":"50px"}},"children":[{"component":"div","props":null,"children":[{"component":"div","props":{"style":{"height":"80px","background":"#191a1e","position":"relative","paddingRight":"40px","marginTop":"20px","transition":"all .3s"},"key":"0"},"children":[{"component":"div","props":{"style":{"position":"absolute","left":"0","top":"0","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","fontSize":"42px","width":"80px","height":"80px","lineHeight":"80px","fontWeight":"700","color":"#fff","textAlign":"center","background":"#236cff"},"data_text":"123"},"children":[]},{"component":"div","props":{"style":{"float":"left","maxWidth":"255px","fontSize":"20px","lineHeight":"80px","color":"#fff","paddingLeft":"40px","whiteSpace":"nowrap","overflow":"hidden"},"data_text":"云存储特惠"},"children":[]}]},{"component":"div","props":{"style":{"paddingLeft":"335px","paddingRight":"180px","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"fontSize":"14px","lineHeight":"24px","color":"hsla(0,0%,100%,.8)","marginTop":"28px","whiteSpace":"nowrap","overflow":"hidden","textOverflow":"ellipsis"},"data_text":"上云仅33元/年,降低企业成本"},"children":[]}]},{"component":"div","props":{"style":{"position":"absolute","right":"40px","top":"20px"}},"children":[{"component":"a","props":{"href":"#","style":{"display":"inline-block","width":"160px","height":"40px","border":"1px solid #fff","lineHeight":"38px","fontSize":"16px","color":"#fff","textDecoration":"none","textAlign":"center","transition":"all .3s"},"data_text":"查看详情"},"children":[]}]}]},{"component":"div","props":{"style":{"height":"80px","background":"#191a1e","position":"relative","paddingRight":"40px","marginTop":"20px","transition":"all .3s"},"key":"1"},"children":[{"component":"div","props":{"style":{"position":"absolute","left":"0","top":"0","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","fontSize":"42px","width":"80px","height":"80px","lineHeight":"80px","fontWeight":"700","color":"#fff","textAlign":"center","background":"#236cff"},"data_text":"123"},"children":[]},{"component":"div","props":{"style":{"float":"left","maxWidth":"255px","fontSize":"20px","lineHeight":"80px","color":"#fff","paddingLeft":"40px","whiteSpace":"nowrap","overflow":"hidden"},"data_text":"云存储特惠"},"children":[]}]},{"component":"div","props":{"style":{"paddingLeft":"335px","paddingRight":"180px","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"fontSize":"14px","lineHeight":"24px","color":"hsla(0,0%,100%,.8)","marginTop":"28px","whiteSpace":"nowrap","overflow":"hidden","textOverflow":"ellipsis"},"data_text":"上云仅33元/年,降低企业成本"},"children":[]}]},{"component":"div","props":{"style":{"position":"absolute","right":"40px","top":"20px"}},"children":[{"component":"a","props":{"href":"#","style":{"display":"inline-block","width":"160px","height":"40px","border":"1px solid #fff","lineHeight":"38px","fontSize":"16px","color":"#fff","textDecoration":"none","textAlign":"center","transition":"all .3s"},"data_text":"查看详情"},"children":[]}]}]},{"component":"div","props":{"style":{"height":"80px","background":"#191a1e","position":"relative","paddingRight":"40px","marginTop":"20px","transition":"all .3s"},"key":"2"},"children":[{"component":"div","props":{"style":{"position":"absolute","left":"0","top":"0","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","fontSize":"42px","width":"80px","height":"80px","lineHeight":"80px","fontWeight":"700","color":"#fff","textAlign":"center","background":"#236cff"},"data_text":"123"},"children":[]},{"component":"div","props":{"style":{"float":"left","maxWidth":"255px","fontSize":"20px","lineHeight":"80px","color":"#fff","paddingLeft":"40px","whiteSpace":"nowrap","overflow":"hidden"},"data_text":"云存储特惠"},"children":[]}]},{"component":"div","props":{"style":{"paddingLeft":"335px","paddingRight":"180px","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"fontSize":"14px","lineHeight":"24px","color":"hsla(0,0%,100%,.8)","marginTop":"28px","whiteSpace":"nowrap","overflow":"hidden","textOverflow":"ellipsis"},"data_text":"上云仅33元/年,降低企业成本"},"children":[]}]},{"component":"div","props":{"style":{"position":"absolute","right":"40px","top":"20px"}},"children":[{"component":"a","props":{"href":"#","style":{"display":"inline-block","width":"160px","height":"40px","border":"1px solid #fff","lineHeight":"38px","fontSize":"16px","color":"#fff","textDecoration":"none","textAlign":"center","transition":"all .3s"},"data_text":"查看详情"},"children":[]}]}]}]}]}]}]}