标签: react-props

我在互联网上发现了这个“只要状态或道具发生变化，反应组件就会自动重新渲染”，但是如果在道具中我传递了与状态不同的东西，它不会引发渲染，即使道具已经改变在时间里。

在此代码中，我传递了一个 prop 而不使用状态

家长

import React from "react";
import Child from "./child";

export default function Parent() {
  let count = 0;

  setInterval(() => {
    count++;
    console.log(count);
  }, 1000);

  return <Child count={count} />;
}

孩子

import React from "react";

export default function Child(props) {
  console.log("render from child");        //console.log once

  return <h1>{props.count}</h1>;
}

谢谢你帮助我解决我心中的混乱

我在提交表单后使用 this.props.history.push 将 props 传递给组件。

提交表单会将用户带到主页（/home），但它还需要将 props 传递给 NavBar 组件，该组件不包含在 React-router 路由中。

 this.props.history.push({
    pathname: '/home',
    propOne: propOneValue // <-- this prop must be received by NavBar component 
 })

我尝试做这样的事情：

    ...

    }).then((response) => {
     this.props.history.push({
        pathname: '/home',
     })
    return <NavBar propOne={propOneValue} />

    ...

但this.props.propOne在导航栏（基于类）组件中未定义。我认为这可能是由于导航栏已经在其他组件之一中没有道具的情况下渲染的。

所以我的问题是 - 你可以使用 this.props.history.push 将 props 传递给与路径名路由不同的组件吗？

我有许多div大小相同但颜色不同的元素。所以我创建了一个组件“Colors.jsx”，其中包含以下代码

import React from "react";
import "./styles.css";

function Colors(props) {
  return (
    <div className="colors" style={{backgroundColor: {props.color}}}></div>
  );
}

export default Colors;

问题是我收到这些错误：

/src/Colors.jsx：意外的标记，应为“，”(6:59)
4 | 函数颜色(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

4 | 函数颜色(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

解析错误：意外的标记，应为“，”
4 | 函数颜色(props) {
5 | return ( …

forwardedAs以下是prop上的文档： https ://styled-components.com/docs/api#forwardedas-prop 。

正如你所看到的，它不是很详细，也没有展示如何正确使用这个道具。

我的问题是：我如何访问通过 发送下来的道具forwardedAs？我如何定义这些forwardedAs道具的类型？

我可以forwardedAs通过...rest参数访问道具，但我需要为这些道具定义类型，因为我还在 Typescript 中使用样式组件。

这是我的代码示例：

// Button.jsx
const myPropsToForward = {
  href: 'https://somewebsite.com',
  // ...more props
}

const Button = styled.button`
  // ...button styles
`

const myComponent = () => (
  <Button
    as={Link}
    to={ctaLink}
    forwardedAs={myPropsToForward}
  />
)

// Link.jsx
const Link = ({
  forwardedAs,
  ...rest
}) => {
  // How do I access the forwardedAs prop from <Button /> here?

  return (
    <a …

我有一个虚拟项目。在我的项目中，我有两个页面。（test1 和 test2）我想将一个道具从 page1 传递到 page2。我知道我可以使用 useRouter 钩子，但我不想将此道具设置为查询字符串。在我的 test1 页面中，我有一个颜色变量。这是常量，并且有一个黄色值。我想在我的 page2 中使用此颜色作为道具（props.color），这是我的 test1 页面

import React from 'react';
const Test1 = props => {
   const color='yellow';
    return (
        <div>
            test1
        </div>
    );
};

export default Test1;

这是我的 test2 页面

import React from 'react';

const Test2 = props => {
    return (
        <div>
            Your color is {props.color}
        </div>
    );
};


export default Test2;

我从 gitHub 克隆了一个 Material-dashboard 存储库来练习 Material UI 库。当我查看代码时，我发现了ownerState道具，我很困惑它是自定义道具还是由Material UI库提供的我对它进行了研究，我认为它是包含我们可以通过任何MUI传递的所有道具的对象组件，但我不太确定到底是什么？

这是我的自定义组件...

我们将对象传递给ownerState

这里使用了 prop

因此，我有一个从端点接收到的值，我想将其传递到我的翻译命令中。

这就是我目前所拥有的：${t('translation:user.form.placeholder')}

我希望能够做这样的事情：${t('translation:user.form.${placeholder}')}

有没有办法做到这一点？如果需要的话，我很乐意为问题提供更清晰的信息。任何帮助，将不胜感激。

当使用多个样式组件时，最上面的一个会覆盖其他默认的 props。

import { styled } from '@mui/material/styles'
import { Badge } from '@mui/material'


const Badge1 = styled(Badge)``

// this works if Badge1 is used directly: <Badge1 />
Badge1.defaultProps = {
    max: Infinity
}


const Badge2 = styled(Badge1)``    // styled Badge1

// this overrides defaultProps from Badge1. Prop max: Infinity does no apply here
Badge2.defaultProps = {
    variant: 'standard'
}

Badge2 只有变体：“标准”默认道具。它跳过最大值：无穷大

如何保留每个级别的所有默认道具

我是redux的新手，我创建了一条导航到用户编辑页面的路线，并且我还想使用以下代码将存储和历史记录作为道具传递。

<Route path="/edit/:id" render={({history}) => (
          <EditUser store={store} history={history} />
)}/>

但是现在我无法访问在EditUser组件中传递（：id）的参数。当我尝试使用this.props.match.params.id进行访问时，它显示为undefined，但是如果我将路由重写为

<Route path="/edit/:id" component={EditUser}/>

但是现在我认为我无法通过其他道具。

帮助非常感谢。

我从db获取了一些数据，当我在控制台上登录它们时，它的效果很好。以及当我穿线时，传递的道具都可以，并按预期显示在屏幕上。

import axios from 'axios'
import { URL } from '../../../../config'
import Header from './header'

class NewArticle extends Component {
    state = {
        article: [],
        team: []
    }
    componentWillMount() {
        axios.get(`${ URL }/articles?id=${ this.props.match.params.id }`)
        .then( res => {
            let article = res.data[ 0 ]
            console.log( res.data[ 0 ] )
            //{
                //     author: "John Secada",
                //     date: "10/12/2018",
            // }           
            axios.get( `${ URL }/teams?id=${ article.team }` )
            .then( res => {
                this.setState({
                    article,
                    team: res.data[0]
                })
                console.log( res.data[0] )
                // …