标签: react-component

我想给 material-ui popover 提供如下图所示的形状。

我已经使用 react 创建了 popover 工作演示并共享了链接以进行编辑。有什么帮助吗？=>工作演示

我也在此处共享代码，但如果将 stackblitz 工作演示用于编辑目的，那就太好了：

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

const PopoverStyle = {
    top: '50px'
};

class App extends Component {

  constructor(props) {
        super(props);
        this.state = { pop_open: false };
    }

  handleProfileDropDown(e) {
        e.preventDefault();
        this.setState({
            pop_open: !this.state.pop_open,
            anchorEl: e.currentTarget,
        }); …

所以我的问题很简单。

我通过react-navigation进行导航。情境

1. 从屏幕A导航到屏幕B。-
   屏幕B中的每个组件正在安装/创建
2. 从B返回到A-
   屏幕B中的每个组件都正在卸载
3. 再次从A导航到B-
   屏幕B中的每个组件都重新安装。

有什么办法可以防止这种情况？数据不是问题，我将它们保留在redux存储中。情况与组件有关。

在我的应用程序中，用户将继续在两个屏幕之间切换，我不想每次都构建其中一个屏幕。

有任何想法吗？

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

发生的情况是，它们都在渲染时将脚本中的最后一个道具实例读入两个实例中。因此，下面的两个组件都以 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 更新。确保所有子组件也是“纯”的”

想象一个灵活的组件，它接受 aReact.ComponentType及其props并渲染它：

type Props<C> = {
  component: React.ComponentType<C>;
  componentProps: C;
  otherProp: string;
};

const MyComponent = <C extends {}>(props: Props<C>) => {
  return React.createElement(props.component, props.componentProps);
};

我可以以某种方式直接MyComponent接收动态吗props，例如这样（不起作用）：

type Props<C> = {
  component: React.ComponentType<C>;
  otherProp: string;
};

const MyComponent = <C extends {}>(props: Props<C> & C) => {
  const { otherProp, component, ...componentProps } = props;
  return React.createElement(component, componentProps);
};

错误：

Error:(11, 41) TS2769: No overload matches this call.
  The last overload gave …