jsx-to-json-brick

jsx2json

jsx-to-json-brick parses JSX into usable JSON.

install

npm install jsx-to-json-brick

使用

const jsx2json = require('jsx2json');
const result = jsx2json(`<button disabled>Hello{this.a()}</button>`)
 
//Result
{
    type : 'button',
    props : {
        disabled : true
    },
    children : [{
        type: 'text'
        text: 'Hello{this.a()}'
    }]
}
 

使用评估

如果您想解析基于javascript的参数，则可以使用该useEval选项。注意：eval如果您不控制输入，不仅使用危险，而且的结果jsx2json可能不是纯JSON。

jsx2json(`<button onClick={()=>alert('hey!')} style={{top : '4px', color : 'white'}} />`);
 
//Result
{
    type : 'button',
    props : {
        onClick : ()=>{
            alert('hey!')
        },
        style : {
            top : '4px',
            color : 'white'
        }
    },
    children : []
}

复杂的用例

const result = jsx2json(`
    <Nav.Item className='test'>
        Hello <a href='/test'>you</a>
    </Nav.Item>
    <button disabled onClick={()=>alert('pressed!')}>Press me</button>
`, {useEval : true});

结果

[
    {
        type: 'Nav.Item',
        props : {
            className : 'test'
        },
        children : [
            'Hello',
            {
                type : 'a',
                props : {
                    href : '/test'
                },
                children : [{
                    type: 'text',
                    text: 'you'
                }]
            }
        ]
    },
    {
        type : 'button',
        props : {
            disabled : true,
            onClick : ()=>{alert('pressed!')}
        },
        children : [ {
            type: 'text',
            text: 'Press me'
        } ]
    }
]