alkin / vue-react Goto Github PK
View Code? Open in Web Editor NEWUse React components as Vue components inside a Vue app
vue-react's People
Contributors
Stargazers
Watchers
vue-react's Issues
more features may needed.
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?
👍
Need a demo
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>jsx support
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>
Cannot use a component in multiple places
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.
I'm still having a problem with duplicate definitions
I'm still having problems with auto-generated duplicate definitions
const h = this.$createElement;
const h = this.$createElement;
when i use keep-alive in vue, the react component cannot be cached
when i use keep-alive in vue, the react component cannot be cached, any idea?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.