小编pet*_*gan的帖子

我试图弄清楚如何切换活动类onClick来更改CSS属性.

我采取了很多方法,并阅读了许多SO答案.使用jquery它会相对简单,但是,我无法通过反应来解决这个问题.我的代码如下.任何人都可以建议我该怎么做？

如果不为每个项目创建新组件,是否可以执行此操作？

class Test extends Component(){

    constructor(props) {

    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);

  }

  addActiveClass() {

    //not sure what to do here

  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        <p>1</p>
      </div>
      <div onClick={this.addActiveClass}>
        <p>2</p>
      </div>
        <div onClick={this.addActiveClass}>
        <p>3</p>
      </div>
    </div>
  }

}

我一直在使用react-apollo和渲染道具方法。

这工作得很好，我的代码看起来像这样。

const App = () => {
   const [player, setPlayer] = React.useState(null);
   if (player) {
     return (
        <GetBroncosPlayerQuery variables={{ player }}>
           {({ data }) => {
              // do stuff here with a select box
            }} 
        </GetBroncosPlayersQuery>
     )
   }
}

现在，如果我尝试对useQuery钩子做同样的事情，当我的代码如下所示时，我会收到以下错误：

const App = () => {
   const [player, setPlayer] = React.useState(false);

   if (isBroncos) {
       const { data } = useQuery(GetBroncosPlayersQueryDocument, {
         variables: { player }
      });
      // do stuff here
   }
}

这给出了一个错误，你不能在条件语句中使用钩子。然后我实现了useLazyQuery但是这也不起作用，因为 …

我正在使用react useEffect挂钩并检查对象是否已更改，然后才再次运行挂钩。

我的代码如下所示。

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

不幸的是，由于对象未被识别为相同对象，因此它一直在运行。

我相信以下是一个示例。

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

也许运行的JSON.stringify(apiOptions)作品？

下面是我的反应本机组件和节点server.js代码,我试图连接到我的节点websocket后端.

我的反应代码与服务器在同一台计算机上运行.我在这里找到了很多不同的答案,而github,我都无法工作.

我也发现这个问题从来没有得到解答,这个问题有一个答案,我无法工作(一年前被问过)

我找到了这篇文章,并尝试根据这些指南修改我的代码,但这不起作用.

反应代码

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

const io = require('socket.io-client/socket.io');
let socket = io('http://localhost:3000');

export default class App extends React.Component {

    constructor(props) {
        super(props);
        console.log(socket);
    }

    render() {
        return (
            <View>
                <Text>Websocket</Text>
            </View>
        );
    }
}

server.js

const express = require('express');
const http = require('http')
const socketio = require('socket.io');

const app = express();
const server = http.Server(app);
const websocket = socketio(server);
server.listen(3000, …

我正在使用打字稿并将一个函数传递给另一个函数。

如果我有一个函数传递到打字稿中的另一个函数中，我应该如何编写类型？

我已经尝试过successHandler: function，但这似乎不起作用。

export function useSubscription(address: string, successHandler: function) {
   successHandler(address)
}

我正在使用样式组件并希望定位 的第一个孩子Text，但我无法这样做。

const Text = styled.p`
    font-size: 12px;
    &:first-child {
        margin-bottom: 20px;
    }
`;

... component

return(
   <div>
      <p>I am just regular text</p>
      <p>Me too</p>
      <Text>Hello Joe</Text> // this should have the margin bottom
      <Text>Goodbye</Text >
   </div>
)

我发现我正在跨应用程序重用行为，当用户在元素外单击时，我可以隐藏它。

随着钩子的引入，我是否可以将其放入钩子中并在组件之间共享以节省我在每个组件中编写相同的逻辑？

我已经在一个组件中实现了一次，如下所示。

const Dropdown = () => {
    const [isDropdownVisible, setIsDropdownVisible] = useState(false);   
    const wrapperRef = useRef<HTMLDivElement>(null);

    const handleHideDropdown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            setIsDropdownVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (
            wrapperRef.current &&
            !wrapperRef.current.contains(event.target as Node)
        ) {
            setIsDropdownVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('keydown', handleHideDropdown, true);
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('keydown', handleHideDropdown, true);
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return(
       <DropdownWrapper ref={wrapperRef}>
         <p>Dropdown</p>
       </DropdownWrapper>
    );
}

我最近开始使用react-native并遇到过该FlatList组件.使用时react我总是使用map数组.

我正在使用,FlatList但是当我想要更改flex-direction项目时我遇到了问题,FlatList所以我恢复了使用map.

以下是使用这两种方法的两个示例:

map

{
    this.state.images.map(image => {
       return (
          <UsersImage key={ image } source={{ uri: image }} />
        )
    })
}

FlatList

<FlatList
    data={ this.state.images }
    renderItem={({item}) => {
        return (
            <UsersImage source={{ uri: item }} />
        )
    }}  
   keyExtractor={(item, index) => index}
/>

任何人都可以解释为什么一个人应该使用FlatList,map反之亦然？

我刚刚开始使用React钩子,我想知道AJAX请求应该如何看待？

我尝试了很多尝试,但是无法让它工作,也不知道实现它的最佳方法.以下是我最近的尝试:

import React, { useState, useEffect } from 'react';

const App = () => {
    const URL = 'http://api.com';
    const [data, setData] = useState({});

    useEffect(() => {
        const resp = fetch(URL).then(res => {
          console.log(res)
        });
    });

    return (
        <div>
          // display content here
        </div>
    )
}

我目前在当前设置中看到此错误。

输入 '({ team: string | null; } | { team: string | null; } | { ...; } | { ...; } | { ...; } | Dispatch<...>)[ ]' 缺少来自“State”类型的以下属性： teamts(2739) index.d.ts(290, 9)：预期类型来自属性“value”，该属性在此处声明为“IntrinsicAttributes & ProviderProps”类型

我的代码如下，如果需要更多详细信息，请告诉我。

动作.ts

export const setTeam = (team: string | null) => ({
  type: 'SET_TEAM',
  team,
});

减速机.ts

export const initialState = {
  team: null,
};

type State = {
  team: string | null;
};

export const GlobalContext = React.createContext<State | null>(null);

export const reducer …