天道酬勤,学无止境

jsx

Advanced conditional component rendering in react

问题 我在 jsx 中有一个链接。 将来我可能会为链接创建新组件,但现在我想使用简单的 jsx。 我还有一个布尔属性,它告诉我是否应该渲染链接。 如果不是,我想在span或div中呈现纯文本。 这就是我现在的做法: {isPassed && <a href={'/uri'}> <span>Import</span> </a>} {!isPassed && <span>Import</span>} 这就是我可以做得更好的方法: {isPassed && <a href={'/uri'}> <span>Import</span> </a> || <span>Import</span>} 处理这样的条件渲染的最佳实践是什么? 我想让它更具可读性。 第一个示例复制了条件,而在第二个示例中,将呈现什么并不明显。 回答1 您也可以尝试使用三元运算符,我们觉得它对我们来说非常易读。 { isPassed ? <a href={'/uri'}><span>Import</span></a> : <span>Import</span> } 但是在多个条件的情况下,还要编写一个 renderComponent 方法,例如: class SomeComponent extends Component { renderComponent(isPassed) { switch(isPassed) {

2022-05-15 19:47:09    分类:技术分享    reactjs   react-jsx   jsx

How to pass nested properties with spread attributes correctly? (JSX)

问题 #1 你好。 我有代码: class Component extends React.Component { render() { this.props.nested.prop = this.props.parse.nested.prop; return <div>Component</div>; } componentDidMount() { console.log(this.props.nested.prop); } } Component.defaultProps = { nested: { prop: "default", }, }; const obj1 = { nested: { prop: "obj1", }, }; const obj2 = { nested: { prop: "obj2", }, }; class Application extends React.Component { render() { return ( <div> <Component parse={obj1} /> <Component parse={obj2} /> </div> ); } } React.render(<Application />, document.getElementById("app")); // console output: // "obj2" //

2022-05-13 09:50:04    分类:技术分享    javascript   reactjs   jsx

VueJS. Module parse failed: Unexpected token <

One of my .vue scripts has this import statement: import ElSlider from 'element-ui/packages/slider/src/main.vue' The problem is, when it compiles, it throws an error: Failed to compile. ./node_modules/element-ui/packages/slider/src/marker.js 13:6 Module parse failed: Unexpected token (13:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | return ( > <div class="el-slider__marks-text" style={ this.mark.style || {} }> | { label } | </div> As you can see, the source code contains

2022-05-03 02:15:58    分类:问答    vue.js   jsx   babel-loader

Is it possible to use Framer Motion in React with pug

I am using multiple technologies for my advanced React web page development I previously used AOS for animating my react components simply, also tried GreenSock once but it didn't fit my needs... I am using Next js and pug js in Next js through https://github.com/pugjs/babel-plugin-transform-react-pug And want to use Framer motion for the same but motion.div changes to <motion className="div"> Could anyone please help me

2022-05-02 23:53:36    分类:问答    reactjs   next.js   pug   jsx   framer-motion

Do I need to "import React" if I use JSX syntax?

I created a React app via Create React App. In the App.js file, there is no import React from 'react';, though it works correctly when I run it. Then I set up ESLint like this: { "extends": ["airbnb", "prettier", "react-app"], "rules": { "prettier/prettier": "error" }, "plugins": ["prettier"] } After that the app doesn't run with an error: React' must be in scope when using JSX react/react-in-jsx-scope What is the more correct way to fix that - to add an exception to the ESLint rules or to explicitly import React wherever I use JSX?

2022-05-02 18:05:41    分类:问答    reactjs   jsx   eslint

Redirect route does not redirect to a specified route in reactjs

I have following component. import React, { Component, useState, useEffect } from 'react'; import { Link, useParams, Redirect } from 'react-router-dom'; import { useDispatch, connect } from 'react-redux'; const SampleComponent = (props) => { const onOverlayHandle = () => { console.log('overlay clicked'); return <Redirect to='/feedback' /> } return ( <div className='view dialog'> <div className='form'> <h3>CONTENTS</h3> </div> <div className='overlay' onClick={onOverlayHandle}></div> </div> ); } const mapStateToProps = state => (state); export default connect(mapStateToProps)(SampleComponent)

2022-05-02 15:53:18    分类:问答    javascript   reactjs   jsx

Auto Import Visual Studio Code not working in jsx

Any idea how to enable auto import suggestion inside jsx ? This is weird because if I'm typing outside of the jsx, it gives me the auto import suggestion. I'm not installing any snippets or Auto Import Extension, or Visual Studio IntelliCode. But even though I installed them, it doesn't help this issue.

2022-05-02 15:38:00    分类:问答    visual-studio-code   autocomplete   jsx   auto-import

Auto closing brackets in visual-studio-code not working for js and jsx files

I am using vscode and it adds a closing bracket or parenthesis if you add the opening bracket or parenthesis but while I use js files or JSX files it doesn't add the closing pair. Please answer how to fix this issue

2022-05-02 09:26:04    分类:问答    javascript   visual-studio-code   jsx

How to pass nested properties with spread attributes correctly? (JSX)

#1 Hello. I have the code: class Component extends React.Component { render() { this.props.nested.prop = this.props.parse.nested.prop; return <div>Component</div>; } componentDidMount() { console.log(this.props.nested.prop); } } Component.defaultProps = { nested: { prop: "default", }, }; const obj1 = { nested: { prop: "obj1", }, }; const obj2 = { nested: { prop: "obj2", }, }; class Application extends React.Component { render() { return ( <div> <Component parse={obj1} /> <Component parse={obj2} /> </div> ); } } React.render(<Application />, document.getElementById("app")); // console output: /

2022-05-02 08:55:11    分类:问答    javascript   reactjs   jsx

How to use the "< >" in React JSX

How can I use the < and > as text in React? I am trying to use it for my portfolio?

2022-05-02 01:13:22    分类:问答    reactjs   jsx