标签: react-component

警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 传递了一个在 StrictMode 内的 Transition 实例

我正在尝试使用一个函数作为组件内的道具，而这个组件是另一个组件的子组件。但该功能不起作用。？我能知道为什么吗。这是我在控制台中收到的警告。

警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 传递了一个位于 StrictMode 内的 Transition 实例。相反，直接向要引用的元素添加 ref

这是我的代码

class Todo extends Component {
  state = {
    show: false,
    editTodo: {
      id: "",
      title: "",
      isCompleted: false
    }
  }
  handleClose = () => {
    this.setState({ show: false })
  }
  handleShow = () => {
    this.setState({ show: true })
  }
  getStyle () {
    return {
      background: '#f4f4f4',
      padding: '10px',
      borderBottom: '1px #ccc dotted',
      textDecoration: this.props.todo.isCompleted ? 'line-through'
        : 'none'
    }
  }
  //this method checks for changes in the …

Run Code Online (Sandbox Code Playgroud)

javascript strict-mode reactjs react-component react-state

Nir*_*ish

2020 07-29

88
推荐指数

7
解决办法

18万
查看次数

如何在JSX中添加自定义html属性

它背后有不同的原因,但我想知道如何简单地将自定义属性添加到JSX中的元素？

html javascript node.js reactjs react-component

And*_*sko

2018 11-07

51
推荐指数

6
解决办法

7万
查看次数

React Hook Form：提交带有嵌套组件的表单或提取嵌套组件的字段进行提交

我有一个包含多个组件的表单（每个组件都是基于功能或基于类的组件），其中包含多个输入字段或单选按钮。当我提交表单时，我要么想要提交嵌套在组件中的字段以及表单数据，要么我应该能够提取字段数据然后提交它们（不确定哪种方法是最好的，为什么？）。我怎样才能实现这个目标？

代码：

import React from "react";
import { useForm } from "react-hook-form";

export default function TestComponent() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" ref={register({ required: true, maxLength: 30 })} />
      {errors.name && errors.name.type === "required" && <span>This is required</span>}
      {errors.name && errors.name.type === "maxLength" && <span>Max length exceeded</span> }
      <NestedComponent1 />
      <NestedComponent2 />
      <input type="submit" />
    </form>
  );
}

function NestedComponent1() …

Run Code Online (Sandbox Code Playgroud)

javascript nested reactjs react-component react-hook-form

Ahm*_*med

2020 12-15

25
推荐指数

2
解决办法

4万
查看次数

NextJS：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义

使用 Nextjs，我在 /pages 目录中创建了一个 index.js，并在 /components/meta/ 目录中创建了 meta.js。

当我的应用程序重建时，我收到以下错误：

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。

如下所示，我正确导入了 Meta，它也是默认导出。很好奇我哪里出错了。

页面/index.js

// import Head from 'next/head'
import Meta from '../components/meta/meta';

export default () => (
  <div>
    <Meta />
    <p>Hello world! Welcome to</p>
    <h1>Moonholdings.io</h1>
  </div>
)

Run Code Online (Sandbox Code Playgroud)

组件/meta/meta.js

import Head from 'next/head'

export default () => (
  <Head>
    <title>Moonholdings.io</title>
    <meta name="description" content="Your Cryptocurrency Portfolio" />>
    <meta name="keywords" content="cryptocurrency, crypto, portfolio, bitcoin, ethereum, holdings"/>
    <meta name="robots" content="index, follow" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  </Head>
)

Run Code Online (Sandbox Code Playgroud)

项目结构

javascript node.js reactjs next.js react-component

Leo*_*ban

2022 02-13

17
推荐指数

3
解决办法

2万
查看次数

React库中的context和updater参数是什么？

我试图了解通过该阵营阵营库,但不明白什么context以及updater是,这是在向组件传递.

以下是库中的代码.

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

Run Code Online (Sandbox Code Playgroud)

这些东西的目的是什么？

javascript reactjs react-component

Ish*_*tel

2019 01-02

14
推荐指数

1
解决办法

659
查看次数

当子组件发生变化时，父组件是否会重新渲染？

我有一个父组件，如下所示：

const Parent = () => {
    return (
       <Child_1 />
       <Child_2 />
   );
}

Run Code Online (Sandbox Code Playgroud)

如果子组件之一发生任何更改，父组件是否会重新渲染？

reactjs react-component

Anu*_*dav

lucky-day

14
推荐指数

2
解决办法

2万
查看次数

反应 - 动态导入组件

我有一个页面,根据用户输入呈现不同的组件.目前,我已对每个组件的导入进行了硬编码,如下所示:

    import React, { Component } from 'react'
    import Component1 from './Component1'
    import Component2 from './Component2'
    import Component3 from './Component3'

    class Main extends Component {
        render() {
            var components = {
                'Component1': Component1,
                'Component2': Component2,
                'Component3': Component3
            };
            var type = 'Component1';  // just an example
            var MyComponent = Components[type];
            return <MyComponent />
        }
    }

    export default Main

Run Code Online (Sandbox Code Playgroud)

但是,我一直在更改/添加组件.有没有办法可能有一个文件只存储组件的名称和路径,然后这些文件动态导入另一个文件？

javascript import components reactjs react-component

LEJ*_*LEJ

lucky-day

13
推荐指数

2
解决办法

1万
查看次数

Material-ui抽屉宽度问题

我遇到了 Material-ui 抽屉的问题。我改变了抽屉容器的宽度，这导致了一个问题。抽屉保留在页面内部一点并且可见，但我不想在没有单击按钮时使其在页面上可见。现在转换属性可能有问题。

所以我将其更改为transform：translate(350px, 0px)，但随后我遇到了另一个问题，那就是如果我单击按钮，抽屉不会显示。对这件事有什么帮助吗？

我已经找到解决方案并编辑了代码。

我在这里创建了一个演示 =>看看

还分享了以下代码：

索引.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false
    };
  }

  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer 
                  open={this.state.openDrawer}
                  containerClassName={!this.state.openDrawer? "hide-drawer": "show-drawer" }
                  openSecondary={true} …

Run Code Online (Sandbox Code Playgroud)

javascript css reactjs material-ui react-component

Sub*_*jit

2018 04-30

11
推荐指数

3
解决办法

5万
查看次数

在 React 中使用了太多 useState 钩子。我该如何重构这个？

useState 钩子很棒。我主要使用 useState 钩子来初始化某些状态，并将该函数传递给子组件来更改状态。但是，我意识到我开始在父页面组件中使用太多 useState 挂钩。这看起来和感觉都是错误的，因为我开始在父页面组件中拥有大约 6-10 个 useState 挂钩。
在不显示代码的情况下，是否有更好的方法来做到这一点？也许是更好的实践，或者更好的重构方式。
谢谢

javascript reactjs react-component react-hooks use-state

Dar*_*ll

lucky-day

11
推荐指数

1
解决办法

1万
查看次数

React + Redux:将PureComponent连接到Redux是否可以？

我想知道这是否可以:

import React, { PureComponent } from "react";
import { Text, TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";

class ListItem extends PureComponent {
  render() {
    return (
      <TouchableOpacity>
        <Text style={{ color: "red" }}>Some Text</Text>
        <TouchableOpacity />
      </TouchableOpacity>
    );
  }
}

export default connect()(ListItem);

Run Code Online (Sandbox Code Playgroud)

而且可能会添加mapStateToProps().或者这是反模式？我听说PureComponents会降低性能......

reactjs react-native redux react-redux react-component

J. *_*ers

2019 06-23

9
推荐指数

2
解决办法

2533
查看次数