标签: reactjs

我正在尝试使页面响应，但是我无法使图像响应，因为它正在脱离材质 UI 中的网格容器。有什么方法可以使图像具有响应性吗？我正在尝试将图像添加到网格容器中，但它仍然显示相同的内容。

import React from "react";
import "./styles.css";
import {
  Typography,
  Container,
  Grid,
  Button,
  CssBaseline
} from "@material-ui/core";
import useStyles from "./styles";
import Pic from "../../Assets/Images/manOnTable.svg";

const Home = props => {
  const classes = useStyles;

  return (
    <React.Fragment>
      <CssBaseline />

      <Grid container className={classes.root} style={{ height: "auto" }}>
        <Grid container sm={6} xs={12}>
          <Grid container style={{ padding: "20%" }}>
            <Grid item sm={12} xs={12}>
              <Typography variant="h3" color="textPrimary" gutterBottom>
                Hello, there.
              </Typography>
              <Typography variant="h5" paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing …

我刚刚学习 Apollo-React 但无法发出 graphql 请求

这就是我在没有阿波罗的情况下所做的事情

const Search = () => {
    const [searchedText, setSearchedText] = React.useState('')
    const [suggestions, setSuggestions] = React.useState([])
    const [selected, setSelected] = React.useState(null)

    const debounceHandler = (searchedText) => debounce(() => {
        sendQuery(`{search(str:"${searchedText}") {name}}`).then(({search}) => {
            if (!search) return
            setSuggestions(search)
        })
    }, 500)

    const handleInputChange = async (e) => {
        if(e.key === 'Enter') {
            const name = e.target.value
            sendQuery(`{getPokemon(str:"${name}"){name, image}}`).then(({getPokemon}) => {
                setSelected(getPokemon)
            })
        }
        debounceHandler(searchedText)()
    }

   return (
    <div>
            <h1>Pokemon Search</h1>
            <input type="text" value={searchedText} onChange={(e) => …

我实现了一个短代码，它连接到metamask浏览器扩展并使用web3 和reactjs显示用户帐户，该代码在使用桌面浏览器时效果很好，但是当我在移动浏览器上尝试时，metamask移动版本由于非-其扩展程序在移动浏览器中的存在，像opensea这样的网络应用程序如何使用移动网络浏览器上的按钮打开metamask移动应用程序？

代码 ：

export const connectWallet = async () => {
          if (window.ethereum) {
            try {
              const addressArray = await window.ethereum.request({
                method: "eth_requestAccounts",
              });
              const obj = {
                status: " Write a message in the text-field above.",
                address: addressArray[0],
              };
              return obj;
            } catch (err) {
              return {
                address: "",
                status: "... " + err.message,
              };
            }
          } else {
            return {
              address: "",
              status: (
                <span>
                  <p>
                    {" "}
                    {" "}
                    <a …

我希望我aysnc function对状态变化做出反应，以便它可以在状态变化时终止。我发现它对改变状态没有反应。

在提供的示例中，我正在从函数内部更改状态，但是我已经对其进行了测试并从函数外部更改了状态（单击按钮），但它也不起作用。

const [testVariable, setTestVariable] = useState(false);

useEffect(()=> {
  testFunction();
}, [])

const testFunction = async () => {
  await timeout(1000);

  console.log("Setting test variable to: " + true);
  setTestVariable(true);

  await timeout(1000);
  
  console.log("Test variable is: " + testVariable);
}

预期结果是看到变量更改为 true，但是我看到的是：

我正在尝试使用 React 和 Typescript 创建一个简单的汉堡菜单组件。我想要做的是将onClick事件处理程序作为道具传递给这个菜单组件。这是我目前拥有的代码：

function Hamburger({ onClick }) {
  return (
    <Box
      as="button"
      type="button"
      p="1"
      fontSize="2xl"
      color="gray.600"
      onClick={onClick}
      display={{ base: "block", lg: "none" }}
    >
      <HiOutlineMenu />
    </Box>
  )
}

然而，打字稿抱怨{onClick}正在传递的道具：

Binding element 'onClick' implicitly has an 'any' type

我认为我可以通过将鼠标悬停在组件onClick中的键上Box并查看所采用的类型来解决此问题onClick。将鼠标悬停在该键上会产生以下消息：

因此，我想将{onClick}prop 修改如下：

function Hamburger({ onClick }: React.MouseEventHandler | undefined) {

但这只会产生一个新错误{onClick}：

Property 'onClick' does not exist on type 'MouseEventHandler<Element> | undefined'.ts(2339)
var onClick: any

我现在不知道该怎么办。因此，我想知道 …

useEffect我正在从hook进行 api 调用

function ChangePassword(props) {
    const token = props.match.params.token;

    const [state, setState] = useState({
        password: "",
        confirmPassword: "",
    });
    const [status, setStatus] = useState({
        loaded: false,
        auth: false,
    });

    useEffect(() => {
        let { auth } = status;

        axios
            .get(
                `http://localhost:2606/api/hostler/changepassword?token=${token}`
            )
            .then((res) => {
                console.log("res", res);
                auth = res.status === 202;
            })
            .then(() => setStatus({ auth, loaded: true }))
            .catch((err) => console.log("err", err));
    },[]);

    return (
        // code
    );
}

但反应发出警告

React Hook useEffect 缺少依赖项：“状态”和“令牌”。包含它们或删除依赖项数组react-hooks/exhaustive-deps

添加status …

我有一个纸牌游戏，玩家从一副牌中选择一张牌添加到第二副牌中。按下活动卡上的按钮会将其移动到另一副牌上，然后将其激活。当焦点对准时，活动的牌组应该更大，而非活动的牌组则最小化，如下所示：

我已经在 SwiperJS 和 React-Swiper 中使用 Swiper Coverflow 效果实现了它，但无论哪种情况，高度都与 CSS 类相关.swiper-slide。此类的宽度设置为固定大小，该大小决定了 Swiper 其余部分的渲染方式。似乎更改幻灯片宽度（以及由此产生的 Swiper 高度）的唯一方法是根据状态将固定宽度类应用于幻灯片。

JSX：

 <SwiperSlide
            key={index}
            className={
              props.selected
                ? "swiper-fixed-width-300 "
                : "swiper-fixed-width-100 "
            }
          >

CSS：

.swiper-fixed-width-100 {
  width: 100px;
}

.swiper-fixed-width-300 {
  width: 300px;
}

然而，这种方法没有像其他交互那样的缓动或过渡，所以感觉太突然了。我想找到一种使用 Swiper API 函数来完成相同操作的方法。如何使用 API 或不操作 CSS 类来实现相同的交互？

沙盒示例

我正在尝试像这样使用 useQueries

function App({ users }) {
   const userQueries = useQueries(
     users.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
       }
     })
   )
 }

然而，users 变量是由 useQuery 提供的，最初返回时未定义。这会导致错误无法读取未定义的映射。我想像 useQuery 一样添加启用，但我在文档中没有看到它。您可以使用简单的 useQuery 来完成此操作，如下所示：

// Get the user
 const { data: user } = useQuery(['user', email], getUserByEmail)
 
 const userId = user?.id
 
 // Then get the user's projects
 const { isIdle, data: projects } = useQuery(
   ['projects', userId],
   getProjectsByUser,
   {
     // The query will not execute until the userId exists …

next.js 文档中的基本路径写道：

例如，当basePath设置为/docs时，使用/about将自动变为/docs/about。

export default function HomePage() {
 return (
   <>
     <Link href="/about">
       <a>About Page</a>
     </Link>
   </>
 )
}

Run Code Online (Sandbox Code Playgroud)

我可以在不使用 element 的情况下根据我提供的路径生成路径吗Link？

以下是我的next.config,js.

module.exports = {
  reactStrictMode: true,
  basePath: '/Some_Folder',
  trailingSlash: true,
}

我在 Next.js 项目的pages文件夹下有一个简单的页面。

import Link from 'next/link';

import firebase from '../common/firebase_init';
import 'firebase/auth';

import { useState, useEffect } from 'react';

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

export default function App(props) {
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  useEffect(() => {
    const unsub = …

错误信息

'Router' cannot be used as a JSX component.
  Its return type 'void' is not a valid JSX element.  TS2786

 import App from './App';
    5 | 
  > 6 | ReactDOM.render(<Router />, document.getElementById('root'));

索引.tsx 代码

ReactDOM.render(<Router />, document.getElementById('root'));

Router.tsx 代码

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import App from './App';

export default function Routes() {
  <>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={App} />
      </Switch>
    </BrowserRouter>
  </>;
}

tsconfig

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", …