标签: react-component

我正在使用 React + TypeScript。我有一个场景，我必须将一个React.SFC组件传递给另一个组件。我正在这样做：

容器.tsx

import ChildComp from './ChildComp';
<ParentComponent CustomComp={ ChildComp } someArray={ [1, 2] } />

现在的问题是，我想ChildComp用someArray值迭代这个组件， inside ParentComponent。

这个子组件有它自己的 prop someValue，我已经向它添加了类型，比如这个子组件可以接受的类型，并且我在 Parent 内部迭代它时传递了这个 prop。

父组件.tsx

const content = someArray.map((value, index) => (
  <CustomComp someValue={ value } key={ index } />
));
{ content }

但我收到错误，那 TS2339: Property 'someValue' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

虽然，如果我在Container.tsx导入它的地方直接使用上面的迭代，它工作正常。但如果我将它传递给另一个组件，则不起作用。我在这里错过了什么吗？

注意：由于相同的迭代正在处理Container.tsx，我将迭代的内容传递给ParentComponent并像变量一样呈现它：

{ …

考虑在 React 中定义函数式组件的以下三个地方 -

1. 在类内部（在 render 方法之外）
2. 在类内（在 render 方法内）
3. 课外

在下面的示例代码，funcComponent1，funcComponent2和funcComponent3在三个不同的位置限定。我如何考虑何时在这 3 个位置中的任何一个定义功能组件？

import React, { Component } from 'react';


const FuncComponent1 = (props) => {
  return (
    <p>{props.name}</p>
  )
}

class TestComponent extends Component {

  constructor(props){
    super(props);
    this.state = {
      name: "JavaScript"
    }
  }


  FuncComponent2 = (text) => {
    return (
      <p>{text}, {this.state.name}</p>
    )
  }


  render(){

    const FuncComponent3 = (props) => {
      return (
        <p>{props.text}, {this.state.name}</p>
      )
    }

    return (
      <div>
        <FuncComponent1 …

我正在使用 react-sizeme 来测量Content来自 ant design的组件的高度/宽度。这是我的代码：

 <SizeMe render={({ size }) => {
            if (size.width == null && size.height == null) {
              return <Content></Content>
            } else {
              //Content contains a lot of HTML, so I only want to fully render it after the inital size has been determined
              return <Content>Width: {size.width} Height: {size.height}</Content>
            }
          }} />

但是，size.height未定义/空。为什么没有测量高度，我该如何解决这个问题？

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Game extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.check = this.check.bind(this);
  }


 drawBackground() {
    console.log("worked");
}

  check () {
    this.myRef.current.innerHTML  = "Testing";
    {this.drawBackground()}      
  }

  render() {
    return (
        <div>
          <h1 ref={this.myRef} id="foo">bar</h1>
          {this.check()}
</div>
    );
  }
}

我需要访问函数中的text内部标签，但收到此错误 Reactjs: Uncaught TypeError: Cannot set property 'innerHTML' of null。我按照文档进行操作。我错过了什么吗？h1check

我想将此反应组件中的箭头样式函数（在onChange处）更改为普通函数。我是一个初学者，对我来说，同时查看两个版本会很有帮助，因为我很难理解新的箭头函数语法。

应该有可能，但是下面的“使用”普通函数会怎么样？

import React from "react";

function Input1(props) {
  //console.log(props)
  return (
    <div>
      <input
        onChange={event => props.handleChange("email", event.target.value)}
      />
    </div>
  );
}

export default Input1;

我在尝试 React 组件时遇到了这个问题。我有一个组件：

window.renderCount=1;

export function Soundscapes() {

    const soundscape = useSelector((s) => s.tasks.soundscape);
    const dispatch = useDispatch();
   
    const [soundscapeAudioElement, setSoundscapeAudioElement] = useState(undefined);
    useEffect(()=>{
        console.log('state just changed to: ', soundscapeAudioElement )
    },[soundscapeAudioElement])

    
    console.log(window.renderCount);
    window.renderCount=window.renderCount+1;

    return (<SomeJSXUnrelatedToQuestion/>)
}

在控制台中，我注意到日志正在1,3,5,7,9随后重新渲染。renderCount我希望它每次在屏幕上增加 1 时都会打印出来1,2,3,4,5，就像每次组件渲染到屏幕上一样。但它似乎在增加它，但不是每次都将其打印到控制台。

我在这里错过了什么吗？

如何<CaretUpFill/>根据状态变量将图标旋转为上下颠倒show，但处于转换状态？我在一个_rafce. （反应箭头函数组件）

目前，我正在渲染另一个图标<CaretDownFill/>，但它看起来并不顺利。

我想让箭头看起来像这样：

        <div className="col-2 d-flex align-items-center">
          <small>{show ? <CaretUpFill /> : <CaretDownFill />}</small>
        </div>

如果只有部分状态发生变化，有没有办法停止反应重新渲染？

问题是，每次我将鼠标悬停在标记上时，都会打开或关闭弹出窗口，这会导致所有标记重新渲染，即使mystate没有更改，只有activePlace状态正在更改。console.log(myState);每次我将鼠标悬停在标记内和外时都会运行。

我尝试使用 useMemo 挂钩，但不知道如何使用它。有什么帮助吗？

这是我的代码：

import React, { useEffect, useState } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';
import { Icon } from 'leaflet';

const myicon = new Icon({
  iconUrl: './icon.svg',
  iconSize: [20, 20]
});

const MyMap = () => {
  const [myState, setMyState] = useState(null);
  const [activePlace, setActivePlace] = useState(null);

  const getData = async () => …

我有一个非常基本的反应组件，如下所示。据我所知，每次状态值发生变化时，该组件都会重新渲染。但我想知道的是，如果每次我在输入字段中输入内容时组件都会重新渲染，为什么输入值保持不变并且不会返回到空值？

import React, { useState } from "react";

const InputExample = () => {
  const [value, setValue] = useState("");
  console.log("render");
  return (
    <>
      <input type="text" onChange={(e) => setValue(e.target.value)} />
    </>
  );
};

export default InputExample;

我们希望向我们的 React 应用程序添加自定义日志记录，并希望在每次用户更改路由时进行记录。为了解决这个问题，我们正在创建一个包装组件，这就是我们目前拥有的：

import React, { useEffect } from 'react';\nimport { Route } from 'react-router-dom';\n\nfunction LoggerRoute(isExact, path, element) {\n    useEffect(() => {\n        // send route-change log event to our mongodb collection\n    }, []);\n\n    // And return Route\n    return (\n        isExact\n            ? <Route exact path={path} element={element} />\n            : <Route exact path={path} element={element} />\n    );\n}\n\nexport default LoggerRoute;\n

...在我们的 App.js 文件中，我们更改了路由：

// remove this // <Route exact path='/tools/team-scatter' element={<TeamScatterApp />} />\n<LoggerRoute isExact={true} path='/tools/team-scatter' element={<TeamScatterApp />} />\n

但是，这会引发错误Uncaught Error: …