标签: react-props

我有一个模态组件和一个表单组件。Modal 是一个功能组件，而 Form 是一个类组件，因为那是我处理表单提交的地方。

Modal [父级] 将其所有 props 传递给 Form。Modal 的 props 对象中有三个值，两个字符串和一个数字。

字符串值符合预期，但数字（用作 ID）为 1，而不是预期的 10（在本例中）。这是一个问题，因为我试图将该值保存到状态中，但没有获得我期望的值。

奇怪的是，如果我console.log(this.props)在里面render()，props 对象会被打印两次；第一次数字值为 1，第二次为 10。这发生在组件的初始渲染时，状态没有发生任何更改。

为什么会发生这种情况以及如何获得我期望的实际值？

这是模态组件。

import React from 'react';
import Form from './Form';


const Modal = (props) => (
  <div className="modal fade" id="createWorkitem" tabIndex="-1" role="dialog" aria-labelledby="createWorkitemLabel" aria-hidden="true">
    <div className="modal-dialog" role="document">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title" id="createWorkitemLabel">
            {/* 10 */}
            Item #{ props.issueNumber }
          </h5>
          <button type="button" className="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div className="modal-body"> …

我实际使用的方式效果很好，但我的道具不断增长，我想知道是否可以将它们分组为一个状态并将其传递给孩子，这是我的代码：

    <Panel
      uniqueIDs={uniqueIDs}
      userID={userID}
      loading={loading}
      premium={premium}
      percent={percent}
      total={total}
      until={until}
      user={user}
      done={done}
    />

渲染后，我像这样定义这些变量：

let { 加载、空、总计、uniqueIDs、切片、百分比、直到、确定、用户、高级、数据、键、完成、用户 ID } = this.state;

我可以只发送this.state变量吗？我做了一些研究，没有找到解决问题的任何方法，我知道我可以使用第三方库来管理状态，但我试图保持简单。

我正在构建这个组件来测试 react-spring 库。我在codeandbox上启动它，然后将它本地拉到我的电脑上。当我把它拉下来时，这个错误出现了，我不知道如何解释它或导致它的原因。我对打字稿很陌生，因此非常感谢任何帮助。

起初，我认为它可能是childrenprop 的错误类型，但后来意识到它实际上是widthand height，现在我不确定它是否是一个styled-components（因为错误出现在 下StyledCard）或者当你使用子渲染 prop 方法时你必须指定你的类型不同..

import * as React from "react"
import styled from "styled-components"

const StyledCard = styled.div`
  width: ${(props: any) => props.width}px;
  height: ${(props: any) => props.height}px;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
`

interface ICardProps {
  children?: React.ReactNode
  width?: number
  height?: number
} …

大家好，

我对反应钩子还比较陌生，回到我的时代（一年前），当我通过组件传递道具时，我会将它们与“props.something”一起使用。

现在我已经完成了一个“待办事项列表”，我可以通过另一种方式使用我的道具，通过在参数中引用对象中的道具：

const Form = ({ addTodo }) => {\n addTodo(x)\n}

那是什么 ？为什么我们不再使用this.props，为什么参数中使用对象？传统的传递道具的方式已经死了吗？这是因为反应钩子吗？

为了更多地说明我在这里的例子，两个组件互相交谈。

第一个 ：

import React, {useState} from \'react\';\nimport Form from \'./Form\';\n\n\nconst Affichage = () => {\n\n    const [todos, setTodos] = useState([\n        \'1\',\n        \'2\',\n        \'3\',\n        \'4\'\n    ])\n\n    const addTodo = text => {\n        const newTodos = [...todos, text];\n        setTodos(newTodos)\n    }\n\n    return (\n        <div>\n            <Form addTodo={addTodo} />\n            <ul>\n                {todos.map((item, index) =>{\n …

我正在尝试为样式组件创建响应式道具，如下所示。首先，我们有一个组件（假设是一个按钮）：

<Button primary large>Click Me</Button>

该按钮将获得主要背景颜色和大尺寸（由主题文件确定）。

我现在想创建此按钮的响应版本。这就是我希望的工作方式：

<Button 
  primary 
  large 
  mobile={{size: 'small', style: 'secondary'}}
  tablet={size: 'small'}} 
  widescreen={{style: 'accent'}}
>
  Click Me
</Button>

我现在有相同的按钮，但样式和尺寸因不同的屏幕尺寸而异。

现在，我已经让它工作了——但它涉及到很多重复的代码。这是它的外观示例：

const Button = styled('button')(
  ({
    mobile,
    tablet,
    tabletOnly,
    desktop,
    widescreen
  }) => css`

      ${mobile &&
      css`
        @media screen and (max-width: ${theme.breakpoints.mobile.max}) {
          background-color: ${colors[mobile.style] || mobile.style};
          border: ${colors[mobile.style] || mobile.style};
          border-radius: ${radii[mobile.radius] || mobile.radius};
          color: ${mobile.style && rc(colors[mobile.style] || mobile.style)};

        }
      `}

    ${tablet &&
      css`
        @media screen and (min-width: ${theme.breakpoints.tablet.min}), print {
          background-color: ${colors[tablet.style] || tablet.style}; …

我有一个ProfileDetails具有切换功能的组件，可以在配置文件上切换附加信息。我导入ProfileDetails到一个组件ProfileTable，并试图通过isOpen用ProfileDetails。然后使用条件 isOpen 执行三元运算符。这样做时，我得到 isOpen 未定义

简介详情：

function ProfileDetails() {
    const [isOpen, setIsOpen] = useState(false);

    const toggle = () => {
        setIsOpen(!isOpen);
    };

    return (
        <>
            <Button>
                <ArrowForwardIosIcon
                    size="small"
                    onClick={toggle}></ArrowForwardIosIcon>{" "}
            </Button>
            <Slider open={isOpen} />
        </>
    );
}

简介表：

import React, { useState, Fragment } from "react";
import format from "date-fns/format";
import Button from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
import DataTable from "../DataTable";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
import ProfileDetails …

我是一个 React 菜鸟，或者说是中间人。该组件正在映射一个空posts数组，作为来自其父组件的 prop。

如何让它等到道具完成更新后再进行映射return()？

我想我需要使用useEffect但我不确定语法。

const Timeline = props => {
  console.log(props.posts.length); // logs twice: initially 0, then 6 a microsecond later.

  useEffefct(()=>{
    // if props is all done and ready, goto return statement
  }, [props]);

  return (
    <>
      <CreatePost />
      <div className="post-list">
        {props.posts.map((post, i) => ( // this maps the initial empty array
          <Post key={i} post={post} />
        ))}
      </div>
    </>
  );
};

export default Timeline;

我有一个现有的 javascript 组件：

const RenderState = ({ state, else: elseChild = undefined, ...states }) => {
  if (state && states[state]) return states[state]
  if (elseChild) return elseChild
  return null
}

export default RenderState

我正在尝试将其转换为 typscript 并且到目前为止：

import React from 'react'

interface Props {
  state: string
  else?: JSX.Element
  any: JSX.Element
}

const RenderState: React.FC<Props> = ({ state, else: elseChild = undefined, ...states }) => {
  if (state && states[state]) return states[state]
  if (elseChild) return elseChild
  return null
}

export default RenderState

我遇到的问题当然 …

有什么方法可以在单个道具中传递多个值吗？

现在它的工作原理是我有一个组件，它接受很多像这样的值：

<div>
  <MyComponent
    valueA={100}
    valueB={90}
    valueC={80}
    valueD={70}
    valueE={60}
  />
</div>

例如，A 和 B 是相关的，我想将它们一起传递，就像

<div>
  <MyComponent
    valueAB={100, 90}
    valueC={80}
    valueD={70}
    valueE={60}
  />
</div>

它可能需要在像这样的单个对象中：valueAB={{100, 90}}但我不知道。

我怎样才能做到这一点并提取另一侧的两个值？

我有一个返回此的箭头函数：

  return (
    <div className="posts">
      <Post />
      {dataApi.map((post) => {
        return <Post post={post} key={uuidv4()} />;
      })}
    </div>
  );
};

在我的 Post 组件中，我尝试导入作者、日期和 props 中传递的文本，但它告诉我该数据未定义。但是，当我 console.log （发布）时，我的数据出现......这是代码：

const Post = ({post}) => {
  //const {author, date_creation, message} = post
  return (
    <div className="post">
      <div className="post__author_group">
        <Avatar className={"post__avatar"} />
        <div className="post__author_and_date">
          <Author className="post__author" author={'author'} />
          <Date className="post__date" date={'date_creation'} />
        </div>
      </div>
      <Text message={'message'} />
      {/* <Media /> */}
      <Interactions />
    </div>
  );
};

如果我console.log(post)，我可以看到我的5个对象，但是如果我取消注释“//const {author, date_creation, message} = post”并将author = {'author "}替换为author …