代码拉取完成，页面将自动刷新
React-Vue is designed to connect React and Vue. Which help you run Vue in React.
There are three uses.
Thanks to Vue's clear hierarchical design, we can easily pull out the reactivity system (9 KB gzipped), and drive React component rendering.
npm install --save react-vue
import React, { Component } from 'react';
import Vue, { observer } from 'react-vue';
const store = new Vue({
data () {
return {
count: 0
}
},
methods: {
increase () {
this.count ++;
}
}
});
@observer
export default class Demo extends Component {
render () {
return <h1 onClick={store.increase}>{store.count}</h1>;
}
}
Introduce react-vue-loader, which compile the Vue component into a React component. As you might think, your previously written Vue components can run inside the React component, and your React components can also run inside the Vue component.
npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-loader
// One.js
import React, { Component } from 'react';
import Two from './Two';
export default class One extends Component {
render() {
return <Two>Hello Vue</Two>;
}
}
<!-- Two.vue -->
<template>
<div @click="count++">
<three>{{count}}</three>
<slot></slot>
</div>
</template>
<script>
import Three from './Three'
export default {
components: { Three },
data () {
return {
count: 0
}
}
}
</script>
// Three.js
import React, { Component } from 'react';
export default class Three extends Component {
render () {
return <span>{this.props.children}</span>
}
}
Introduce react-vue-native-scripts, which start a server to compile the vue component into a react component.
npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-native-scripts
All React Native Components exists as built-in components in Vue, you can use react native components as following
<template>
<view>
<view>
<text>Hello react vue</text>
</view>
<animated:view>
<text>Hello animation</text>
</animated:view>
</view>
</template>
The similar JSX code is as follows
import React, { Component } from 'react';
import { View, Text, Animated } from 'react-native';
export default class Demo extends Component {
render() {
return (
<View>
<View>
<Text>Hello react native</Text>
</View>
<Animated.View>
<Text>Hello animation</Text>
</Animated.View>
</View>
);
}
}
You can use all the React Native API in Vue component. The camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。