老旧项目中使用react 和 antd

起因

1. 没有webpack等构建工具的老旧项目(jquery等开发的) 但是需要维护,修改部分功能
2. 没有react,开发效率太低下.
3. 老旧代码太难读懂,且没有学习价值.

具体步骤

1. 加载以下文件(js, css) 可在react官网 和 antd-design官网中下载

<script src="scripts/react/react.production.min.js"></script> <!--react-->
<script src="scripts/react/react-dom.production.min.js"></script> <!--react-dom-->
<script src="scripts/react/babel.min.js"></script> <!--babel 为了支持jsx-->
<script src="scripts/react/component/ant-dist/antd.js"></script> <!--antd4.x组件-->
<link href="scripts/react/component/ant-dist/antd.css" rel="stylesheet"/> <!--antd4.x的样式-->

2. 使用window 对象保存react函数组件

 <script type='text/babel'>
   const userIdComponent = (domId, value, onChange) => {
    const Component = (props) => {
        const [value, setValue] = React.useState(props.value);
        const {Select} = antd;
        const {Option} = Select;
        const handleChange = (newValue) => {
            console.log(newValue);
            props.onChange(newValue);
            setValue(newValue);
        };
        const onChange = (newValue) => {
            if(!newValue || !newValue.length){
                props.onChange('');
                setValue('');
            }
            console.log(newValue);
        }
        return (<Select style={{width: '100%'}}
                        value={(value && [value]) || []}
                        onChange={onChange}
                        mode="tags"
                        onSelect={handleChange}
        >
            <Option value={'2'}>
                    2222
            </Option>
        </Select>)
    }
    const Dom = document.getElementById(domId);
    if (!Dom) {
        console.error('没有找到指定dom节点');
        return false;
    }
    ReactDOM.render(<Component value={value} onChange={onChange}/>, Dom);
};

window.diyReactComponet = { // 导出组件到 window 对象上 方便使用
    userId : userIdComponent,
}

 </script>

3. 在需要使用react组件的地方注入组件

html
 <div id='component'>
 1
 </div>
 
js
 window.diyReactComponet.userId('component', 1, ()=>{});
 

未解决的问题

1. 如何模块化 react组件? babel 会转换import 为 require. 无法使用 es6的模块化语法