标签: react-component

我正在按照教程进行操作，但意外收到此错误，有人知道发生了什么吗？

这是完整的错误：

React_devtools_backend.js:2557 React-beautiful-dnd：遇到设置问题。> 不变失败：provided.innerRef 尚未随 HTMLElement 一起提供。您可以在以下位置找到有关使用innerRef回调函数的指南： https: //github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

可删除代码：

render() {
        const { column, clients } = this.props;
        return (
            <Container>
                <Title>{column.name}</Title>
                <Droppable droppableId={column.id}>
                    {(provided) => (
                        <TaskList
                            innerRef={provided.innerRef}
                            {...provided.droppableProps}
                        >
                            {clients.map((client, idx) => (
                                <Task
                                    key={client.id}
                                    client={client}
                                    index={idx}
                                />
                            ))}
                            {provided.placeholder}
                        </TaskList>
                    )}
                </Droppable>
            </Container>
        );
    }

可拖动代码：

    render() {
        const { client, index } = this.props;
        return (
            <Draggable draggableId={client.id} index={index}>
                {(provided) => (
                    <Container
                        innerRef={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                    >
                        {client.name}
                    </Container>
                )}
            </Draggable>
        );
    }

谢谢你！！！

我是反应的绝对初学者。我必须将特定属性传递给 div 内的所有组件，而不将它们传递给 individual，例如，而不是这样做：

 function App() {
    return (
      <div>
        <Component1 props = {propObject}/>
        <Component2 props = {propObject}/>
        <Component3 props = {propObject}/>
      </div>
    );
}

我怎样才能实现这样的目标？:

function App() {
  return (
    <div props={propObject}>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  );
}

React 中“父组件”的定义是什么？

例如。

const A = () => {
  return (
    <B>
      <C/>
    </B>
  );
}

是A的父母吗C？
是B的父母吗C？

后续： 获取via prop
B的元素。如果是 的子级，则应该是 的父级。但这实际上应该是这里提到的。CchildrenCBBCcontainment

所以我有一个子组件，我想在父容器组件中渲染它的多个实例。向每个对象传递不同的道具，以便它们显示不同。

发生的情况是，它们都在渲染时将脚本中的最后一个道具实例读入两个实例中。因此，下面的两个组件都以 placeHolder==='Describe myself' 结尾，是否有解决方法，以便它们分别轮流注入它们的 props？

           <ButtonMode 
              open={this.state.open}
              handleClose={this.handleClose}
              buttonName='Update'
              modalOpen={this.modalOpen}    
              placeHolder="New picture url"
              change={this.handlePicture}
              label='URL'
            />

           <ButtonMode 
              open={this.state.open}
              handleClose={this.handleClose}
              buttonName='Update'
              modalOpen={this.modalOpen}     
              placeHolder='Describe yourself'
              label='Bio'
              change={this.handleBio}
                />

按钮模式

class ButtonMode extends Component {
    constructor(props){
        super(props)
        this.state = {
            input:''
        }
        this.handleInput = this.handleInput.bind(this);
        this.handle = this.handle.bind(this);
    }

    handleInput(val){
        this.setState({input:val})
    };

    handle() {

        this.props.change(this.state.input);
    };

    render(){
        const { classes } = this.props;
        return (
            <div>
                <Button 
                    className={classes.button}
                    onClick={this.props.modalOpen}
                    >Update
                </Button>
                <Modal
                    aria-labelledby="simple-modal-title"
                    aria-describedby="simple-modal-description"
                    open={this.props.open}
                    onClose={this.props.handleClose}
                    >
                    <div className={classes.paper}>
                        <TextField
                            id="filled-textarea"
                            label={this.props.label} …

我正在编写一个反应本机应用程序，它需要在关闭或后台之前存储一个字符串。当应用程序启动时，它需要再次检索字符串。（我正在使用expo进行开发）

我尝试将数据存储在 中componentWillUnmount()，但是当我关闭应用程序时，不会调用该函数。

这是存储数据的功能。

_storeData = async () => {
try {
  await AsyncStorage.setItem('data', 'savedData2');
  console.log("done storing");
} catch (error) {
  console.log(error)
}};

我打电话的storeData()方式如下：

componentWillUnmount() {
 console.log("unmount")
 this._storeData();
}

首先，我认为它不存储数据，因为我正在调用一个异步函数，该函数componentWillUnmount()可能会在完成之前被取消，但是我也没有收到日志unmount。

前言

几天前我问了一个类似的问题，虽然本质上是相关的，但我相信解决方案最终会有所不同，所以我在另一个线程中再次询问。

CodeSanbox示例（已更新以反映已接受的答案）

问题：

我希望通过classNameprop 传入的任何外部样式都比我的自定义组件内部样式具有更高的特异性。这样，使用它的人就可以调整边距和填充。但是，我的组件默认内部样式正在覆盖我的外部样式，我希望它是相反的。

细节：

我正在创建一个基于material-ui 之上的自定义组件库。我想让自定义组件 api 类似于@material-ui这样我们的开发人员会发现它们更易于使用。我正在构建的每个组件都有自己的内部样式，覆盖默认的material-ui样式，在本例中它被定义为 class button。另外，就像@material-ui我接受一个 color prop一样<TestButton color={'default'}/>。最后，如果需要的话，我希望允许用外部样式覆盖我的自定义按钮。我正在使用该clsx库来构建 className 字符串。

代码：

import React, { useState } from "react";
import { makeStyles } from "@material-ui/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import { Button } from "@material-ui/core";
import clsx from "clsx";

const useAppStyles = makeStyles({
  gButton: { margin: "150px" }
});

export default …

我使用以下代码创建带有表单验证的登录页面：

import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { useForm } from 'react-hook-form';

class SignIn extends React.Component {
  
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(errors);

  render() {
    return (
      <div>
        <Form onSubmit={handleSubmit(onSubmit)}>

            <Label>Email : </Label>
            <Input type="email" placeholder="email" name="email" ref={register({required: true, pattern: /^\S+@\S+$/i})}></Input>

            <Label>Password : </Label>
            <Input type="password" placeholder="password"  name="password" ref={register({required: true, min: 8, maxLength: 20})}></Input>

        </Form>
      </div>
    );
  }
}


export default SignIn; …

ReactComponent例如，我将 SVG 导入到我的组件中，并将它们作为组件导入

import { ReactComponent as D1 } from '../../../assets/images/characteristics/D1.svg';

当我运行 Jest/Enzyme 来测试组件时，出现以下错误

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

看来我需要嘲笑这个吗？我怎么能这么做呢？

在 中styled-components，我试图通过传递 React Icon 来在悬停时渲染它，content但由于某种原因，我的悬停渲染是[Object Object]。

成分：

export const FooLink = styled(Link)`\n  padding: 0.5rem 2rem;\n  color: ${({ theme }) => theme.colors.white};\n  text-align: center;\n  margin: 0 auto;\n  position: relative;\n  font-size: ${({ theme }) => theme.fontSizes.p};\n  letter-spacing: 0.15em;\n  transition: ${({ theme }) => theme.animations.trans3};\n\n  &:after {\n    content: \'${FaArrowRight}\';\n    /* content: \'>\'; */\n    position: absolute;\n    opacity: 0;\n    right: -${({ theme }) => theme.spacings.small};\n    transition: ${({ theme }) => theme.animations.trans3};\n  }\n\n  &:hover {\n    padding-right: ${({ theme …

有人请用一个简单的例子向我解释 React 文档的最后一段，它是关于 React.PureComponent 的，我见过的所有示例都是高级的，我刚刚开始了解这个概念，但我无法确切地看到它是什么指。正是这一点，孩子也应该“纯洁”。据我所知，我认为这种说法有些言过其实，因为如果父亲不重新呈现自己，那么孩子们也不会重新呈现自己。，或者，是否有什么东西我无法逃脱而我无法想象？这就是为什么我需要一个简单的例子，我已经在这里查看了所有类似的问题，但它们是高级示例，并不涵盖我正在寻找的内容。

“此外，React.PureComponent 的 shouldComponentUpdate() 会跳过整个组件子树的 prop 更新。确保所有子组件也是“纯”的”