天道酬勤,学无止境

jsx

How to redirect to home page(in jsx) after logout in react

问题 <li> <a href="homepage.jsx"> <i className="fa fa-sign-out pull-right"></i> Log Out </a> </li> 我在homepage.jsx中有主页组件,单击logout后我需要转到主页组件。 在这方面帮助我。 回答1 您正在使用react-router ,因此不要使用a和href使用Link ,而是这样写: <li> <Link to="/"> <i className="fa fa-sign-out pull-right"></i> Log Out </Link> </li> 由于 Homepage 组件是您的indexroute ,因此导航到/将render它。 如果您想在任何函数内动态导航,请查看以下答案: 在 React-Router v4 中以编程方式导航 回答2 我假设您正在使用 react-router v 2.xx 您可以为此创建一个如下所示的组件。 您的路线还应包含您要重定向到的路线。 <Route path="/" component={App}> <Route path="/homepage" component={Homepage}/> </Route> class Logout extends React.Component { static contextTypes =

2022-07-11 09:58:33    分类:技术分享    html   reactjs   redirect   react-jsx   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