alkin / vue-react Goto Github PK
View Code? Open in Web Editor NEWUse React components as Vue components inside a Vue app
Use React components as Vue components inside a Vue app
How to import jsx react component in vue?
My code in vue:
import VueReact from 'vue-react';
Vue.use(VueReact);
import App from './blocks/App.js';
Vue.react('Grid', App);
in react component App.js:
import React, { Component } from 'react';
import ReactGridLayout from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
var layout = [
{i: 'a', x: 0, y: 0, w: 4, h: 12},
{i: 'b', x: 4, y: 0, w: 4, h: 12},
{i: 'c', x: 0, y: 12, w: 8, h: 10}
];
return (
<div>
<ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
<div key={'a'}><iframe src="http://localhost:8080/#/experts-evaluations/1" width="100%" height="100%"></iframe></div>
<div key={'b'}><iframe src="http://localhost:8080/#/experts-evaluations/1" width="100%" height="100%"></iframe></div>
<div key={'c'}><iframe src="http://localhost:8080/#/store" width="100%" height="100%"></iframe></div>
</ReactGridLayout>
</div>
);
}
}
export default App;
error:
error in ./src/components/blocks/App.js
Syntax Error: Unexpected token (20:6)
18 | ];
19 | return (
> 20 | <div>
| ^
21 | <ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
22 | <div key={'a'}><iframe src="http://localhost:8080/#/experts-evaluations/1" width="100%" height="100%"></iframe></div>
23 | <div key={'b'}><iframe src="http://localhost:8080/#/experts-evaluations/1" width="100%" height="100%"></iframe></div>
I'm still having problems with auto-generated duplicate definitions
const h = this.$createElement;
const h = this.$createElement;
Good job, but maybe we should need a demo
// .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime", "transform-react-jsx"]
}
// vue main.js
import VueReact from 'vue-react';
Vue.use(VueReact);
Vue.react('Resizable',Re );
// react Re.js
import React, { Component } from 'react';
import ReactGridLayout from 'react-grid-layout';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
var layout = [
{i: 'a', x: 0, y: 0, w: 4, h: 12},
{i: 'b', x: 4, y: 0, w: 4, h: 12},
{i: 'c', x: 0, y: 12, w: 8, h: 10}
];
return (
<div>
<ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
<div key={'a'}><iframe src="http://localhost:8080/#/experts-evaluations/1" width="100%" height="100%"></iframe></div>
<div key={'b'}><iframe src="http://localhost:8080/#/experts-evaluations/1" width="100%" height="100%"></iframe></div>
<div key={'c'}><iframe src="http://localhost:8080/#/store" width="100%" height="100%"></iframe></div>
</ReactGridLayout>
</div>
);
}
}
export default App;
// error
[Vue warn]: Error in mounted hook: "TypeError: Cannot convert undefined or null to object"
found in
---> <Resizable>
when i use keep-alive in vue, the react component cannot be cached, any idea?
I have the same idea like you, I want to write a vue-react-loader, that can import react component like vue component using webpack, for a more vue native way to use react components, but there is some problems.
We map the props and events from vue to react, but there is some react components like this.
https://ant.design/components/table/#Column
Here is a table component of react, it has a render method let you custom how your column render. How to write this render method in "parent" vue component and pass it to the target "child" react component that wrapped by a vue component.(Since jsx is just js object, there is some "dirty" way (like write compiled jsx) to solve this, maybe here is a better way?)
And think about vue "slot" and react "props.children", I have no idea about how to implement this Form component in our way to use React component in vue.
Please forgive my poor English, did I make myself clear?
I tried using the resizable react component in vue. It works great if I use the component only once in a page, if i have more than one instances of the same component in a single page, the component that is created first is being used instead of a new component instance being created.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.