Comments (4)
Hi, props spread is supported. Eg:
In
const App = (props) => pug`
.app(...props) Contents
`
Out
const App = (props) => <div {...props} className="app">Contents</div>
from babel-plugin-transform-react-pug.
Ah, great.
from babel-plugin-transform-react-pug.
Please reopen this issue.
Prop spread doesn't work in conjunction with any other props (which is used for Animation in conjunction with gestures) i.e.
<Animated.View
key={item.id}
style={[this.getCardStyle(), styles.cardStyle, { zIndex: 99 }]}
{...this.state.panResponder.panHandlers}
>
{this.props.renderCard(item)}
</Animated.View>
from babel-plugin-transform-react-pug.
Could you provide an example of when it doesn't work in conjunction with other props?
If you try the following, it should work:
import { Animated } from 'react-native';
const AnimatedView = Animated.View;
// rest of code
const viewStyles = [this.getCardStyles(), styles.cardStyle, {zIndex: 99}])
pug`
AnimatedView(key=item.id, style=viewStyles, ...this.state.panResponder.panHandlers)
`
I believe it's another issue causing the problem as the Animated.View
doesn't work when used in conjunction with pug, this is because it conflicts with the way class names are defined. i.e.
pug`
Animated.View
`
will become:
<Animated className="View" />
from babel-plugin-transform-react-pug.
Related Issues (20)
- `class` property was broken, like pug`div( class="container" )` HOT 14
- Case fall through doesn't work HOT 1
- Can't change "React.Fragment" output — Babel's transform react-jsx plugin doesn't honor the "pragmaFrag" option
- create-react-app integration instructions are out of date HOT 3
- How to get around "Unescaped, buffered code is not supported in react-pug" HOT 1
- pug-as-jsx-loader is not good, but their readme looks better HOT 3
- Integration with Ionic React Typescript HOT 1
- start server with errors HOT 5
- Problems in Webstorm HOT 3
- Next js, TypeError: Cannot read property 'Fragment' of undefined HOT 2
- special characters in class names -- i.e. tailwindcss HOT 2
- not support tsx? HOT 3
- Couldn't you just use webpack
- Is it possible to use webpack's rawloader to feed this plugin template files as strings?
- Doesn't work with webpack, ts-loader, babel with `tsconfig.json > target: "es5"` configuration.
- prop spreading (support attribute blocks) HOT 2
- Support tsx
- SWC plugin HOT 3
- support for esbuild?
- Proposal: typescript react-pug plugin HOT 1
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.
from babel-plugin-transform-react-pug.