标签: reactjs

您好，我正在尝试使用 AWS-amplify 和 React-dom 登录后重定向并更改我的路径

我需要在用户登录后将它们重定向到localhost/mainmain，因为它仍然存在localhost/

如果有人有想法可以帮助我谢谢我的代码：

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Amplify from "aws-amplify";
import {
  AmplifyAuthenticator,
  AmplifySignUp,
} from "@aws-amplify/ui-react";
import { AuthState, onAuthUIStateChange } from "@aws-amplify/ui-components";
import awsconfig from "./aws-exports";
import Main from "./main";

Amplify.configure(awsconfig);

const AuthStateApp = () => {
  const [authState, setAuthState] = React.useState();
  const [user, setUser] = React.useState();

  React.useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    }); …

我正在使用 React，尝试将 SVG 转换为 jsx，一切看起来都很好，但是我所有的 svgs 都有一个启用背景属性

style="enable-background:new 0 0 473.806 473.806;"

我在转换为当前使用的 JSX 时遇到问题

style={{enableBackground:'new 0 0 387.2 387.2'}} 

这不起作用，我只想使用 img 标签，但是我想在悬停时更改 SVG 的颜色。

更新：这是 SVG

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="35px" height="35px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
<g>
    <path d="M25.302,0H9.698c-1.3,0-2.364,1.063-2.364,2.364v30.271C7.334,33.936,8.398,35,9.698,35h15.604
        c1.3,0,2.364-1.062,2.364-2.364V2.364C27.666,1.063,26.602,0,25.302,0z M15.004,1.704h4.992c0.158,0,0.286,0.128,0.286,0.287
        c0,0.158-0.128,0.286-0.286,0.286h-4.992c-0.158,0-0.286-0.128-0.286-0.286C14.718,1.832,14.846,1.704,15.004,1.704z M17.5,33.818
        c-0.653,0-1.182-0.529-1.182-1.183s0.529-1.182,1.182-1.182s1.182,0.528,1.182,1.182S18.153,33.818,17.5,33.818z M26.021,30.625 …

我有一个在 Django 中构建的 API 中心和一个在 NextJS 中构建的前端应用程序。我目前正在对 Nextjs 中的 Django API 进行身份验证，我对最佳实践感到好奇。

目前，NextJS 应用程序将用户用户名/密码发布到端点。此端点返回用户令牌或说明问题的错误。

反应

  const login = async () => {
    let token = await axios.post('/api/accounts/', {
      email: email,
      password: password
    }).then(r => r.data.token).catch(function (error) { console.log(error) })

      if (token) {
        router.push({
            pathname: '/home/',
            query: { token: token },
          })
        }
      }

nexjs服务器api/accounts

export default async (req, res) => {
  if (req.method === 'POST') {
    try {
      // retrieve payment intent data
      const {data} = await axios.post('https://website/api/api-token-auth/', req.body) …

根据我的问题，我想删除一些默认的工具栏选项，例如字体系列或表情符号，并仅保留文本样式选项。怎么做 ？

对于我的编辑来说。

<Editor
    editorState={editorState}
    wrapperClassName="demo-wrapper"
    onEditorStateChange={this.onEditorStateChange}
    toolbar={{
        inline: { inDropdown: true },
        list: { inDropdown: true },
        textAlign: { inDropdown: true },
        link: { inDropdown: true },
        history: { inDropdown: true },
    }}
/>

我正在学习带有钩子的reactjs表单，现在我想使用jest和enzyme测试提交时的表单。

这是我的登录组件。

import React from 'react'

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

这是login.test.js 文件

 describe('my sweet test', () => {
    it('clicks it', () => {
      
       const wrapper …

我试图在一个单元格内有两行单独的文本，其中一行文本位于另一行之上，在 Material-UI 的数据网格组件中，似乎无法实现任何工作。这是我尝试过的：

 const columns: ColDef[] = [
        {
            field: "name",
            headerName: "Sector",
            width: 300,
            renderCell: (params) => {
                let name = params.data.name
                const flow = params.data as IOFlow;
                const title = Currency.format(flow.value)
                    + " " + props.direction
                    + " per " + Currency.format(1);
                return (
                    <>
                         <Typography fullWidth display='block'>
                              {name}
                         </Typography>
                         <br/>
                         <Typography fullWidth display='block'>
                              {title}
                         </Typography>
                    </>
                );
            }
        },
    ];

如果我还需要提供更多信息，请告诉我。

我正在使用 React 和 Apollo Client 开发一个单页 Web 应用程序，我想知道如何在 Apollo 客户端链接和 React 上下文之间正确传达身份验证状态。

在客户端中，我编写了一个 AuthProvider 上下文来提供当前用户信息，以便我可以在组件树中的任何位置执行

const authState = useAuthState()
const dispatch = useAuthDispatch()

从而根据需要查询和更新身份验证信息。例如，我使用它来编写一个PrivateRoute组件，如果未通过身份验证，则重定向查看者：

const PrivateRoute: FunctionComponent<RouteProps> = ({ children, ...rest }) => {
    const authState = useAuthState()

    return (
        <Route
            {...rest}
            render={({ location }) =>
                authState.user ? (
                    children
                ) : (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: { from: location }
                        }}
                    />
                )
            }
        />
    )
}

这一切都很好。当将此与我选择的身份验证形式（JWT）结合起来时，我的问题出现了。我将访问令牌存储在 中，authState并且刷新令牌在登录时由后端设置为 httpOnly cookie。

但我必须Authorization: Bearer …