标签: react-props

我通过做在API调用axios中React使用UseEffect。
我们将响应设置为一个名为datausing的变量useState

const [data, setData] = useState({});
  setData(response);

响应来自 NASA API，我们只得到一个为此调用返回的对象（粘贴在下面）。

由于我将响应命名为“data”并且它也有一个“data”键，如果我想记录 url，我知道我会输入console.log(data.data.url)并且在我的app.js主函数中可以顺利运行。在我的card.js组件中，我可以成功登录console.log(data)，console.log(data.data)并且它完全符合您的预期，但是当我console.log(data.data.url)或(data.data.title)它由于某种原因变成时undefined，这会导致 JSX 的返回函数出现大错误，并且站点将无法加载：

 TypeError: Cannot read property 'data' of undefined error.

我不认为我的命名有任何问题，因为它在对象的更高级别工作正常，例如console.log(data.data)工作，并且我在眼前看到列出的下一级属性。

我真的是在 console.logging 这个：

{console.log('FROM INSIDE THE RETURN')}
{console.log(props.data)}  // works, displays object {}
{console.log(props.data.data)}  //works, displays object one level lower   
{console.log(props.data.data.url)}  // type error. You name the property.

不用说这行不通，这是我完成任务的第一种方法： …

我试图澄清一些关于 React 中布尔属性的混淆（最好来自权威​​来源）。

假设有MyComponent几个布尔道具prop1，prop2...

首先：似乎布尔道具就像其他道具一样：您可以在defaultProps 或解构 params 中定义默认值：

const MyComponent = ({ prop1, prop2 }) => (
   ...
)

MyComponent.defaultProps = {
  prop1: false,
  prop2: true,
}

或者等效地（不？）

const MyComponent = ({ prop1 = false, prop2 = true }) => (
 ...
) 

不清楚的是如何传递值。再一次，自然的“React 风格”似乎是

  <MyComponent prop1={ BOOLEAN_EXPRESION1 } prop2={ BOOLEAN_EXPRESION2 } />

...包括静态文字( false/true)。

但是，它还指出传递布尔属性的正确（推荐？）方法是属性的存在/不存在，正如HTML5 规定的那样。

所以，而不是<MyComponent prop1={true} prop2={false} />，应该写<MyComponent prop1 …

我尝试将 flow 与 React 一起使用，但发现了一些奇怪的行为，如果我尝试将 React 中的 HTMLProps 包含到组件 Props 类型中，flow 会抛出错误“无法获取 React.HTMLProps，因为模块 React 中缺少属性 HTMLProps”

成分：

const Row = (\r\n  {\r\n    jc,\r\n    ai,\r\n    children,\r\n    ...rest\r\n  }: RowProps & React.HTMLProps<HTMLDivElement>\r\n) => (\r\n  <RowW\r\n    justifyContent={jc}\r\n    alignItems={ai}\r\n    {...rest}>\r\n    {children}\r\n  </RowW>\r\n)

\n\n

流程错误：

Cannot get React.HTMLProps because property HTMLProps is missing in module react [1].\r\n\r\n [1]  2\xe2\x94\x82 import * as React from \'react\'\r\n       :\r\n     21\xe2\x94\x82     ai,\r\n     22\xe2\x94\x82     children,\r\n     23\xe2\x94\x82     ...rest\r\n     24\xe2\x94\x82   }: RowProps …

我有一个Layout包含名为 的状态的组件isLightMode，我想将其作为 prop 传递给其他组件访问和使用。

这是我的Layout组件：

import React from 'react'
import Main from '../components/main'

export default class Layout extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isLightMode: true }
    this.toggleTheme = this.toggleTheme.bind(this)
  }

  toggleTheme() {
    this.setState(state => ({
      isLightMode: !state.isLightMode,
    }))
  }

  render() {
    const { isLightMode } = this.state
    const { children } = this.props
    return (
      <div>
        <Navigation
          isLightMode={isLightMode}
          onToggleTheme={this.toggleTheme}
        />
        {children && <Main isLightMode={isLightMode}>{children}</Main>}
      </div>
    )
  }
}

特别是，我有一个Home想要访问 …

我有一个具有子组件的功能组件。子组件显示一些通过 props 从父组件传递给它的文本。当我更改父组件中的文本并将其向下传递时，子组件仍保留旧文本。

下面是父组件 MainPage 的最小可重现示例。

function MainPage(){
    let text = "This is the original text";
    setTimeout(function(){ text = "This is the new text" }, 3000);
    return(<DisplayText text={text} />);
}

下面是显示文本。

function DisplayText(props){
    return(<p>{props.text}</p>)
}

如何更新子组件，使其在 3 秒后显示“这是新文本”而不​​是“这是原始文本”？

提前致谢！

我在这个路径中有文件，./pages/blog/[id]/[title].js这里是我写的代码：

import React from 'react';
import PropTypes from 'prop-types';
import fetch from 'isomorphic-unfetch';
import BASE_URL from '../../../BaseURL';


const BlogSinglePage = props => {
  console.log(props.post);//undefined
  console.log(props);//{}
 return (
   <div></div>
 );
};

BlogSinglePage.propTypes = {
  post: PropTypes.object
};

BlogSinglePage.getInitialProps = async ({ query }) => {
    const res = await fetch(`${BASE_URL}/api/post/${query.id}`);
    const post = await res.json();
    return { post };
};

export default BlogSinglePage;

我的问题是什么时候getInitialProps 是一个async函数，它BlogSinglePage的 props 是空的，但是当getInitialProps 它不是一个async函数时，一切正常，props 不是空的

我已按照逐行实现帖子页面中 …

我正在尝试从导航栏中的链接控制轮播。我现在拥有的是 HomePage 组件（NavBar 和 Carousel 的父组件）中的 click 方法，它根据在 NavBar 中单击的链接更新当前选定索引的状态。我对如何让 Carousel 收听索引状态并在按下 Link 后移动幻灯片的方法一无所知。当我最初设置 activeIndex 时，我无法让它正确收听作为道具传递的索引，并且 onSelect 处理程序也基本上什么都不做。

更新：HomePage => 刚刚向状态添加了方向以反映下面轮播中更新 v2 的变化。

class HomePage extends Component {
    constructor(props){
        super(props);
        this.state = {index: '0', direction: null};
    }

    handleclick = (i) => {
        this.setState({direction: (this.state.index>i) ? 'prev':'next', index: i});
    }

    render() {
        return (
            <Container className='containerCustom d-flex h-100 w-100' fluid>
                <Row className='fullscreen-bg h-100 w-100'>
                    <video loop autoPlay className='fullscreen-bg_video w-100 h-100'>   
                        <source src={background} type='video/mp4'/>
                    </video>
                </Row>
                <Row className='flex-fill w-100 navrow' noGutters>
                    <Col …

我正在 Gatsby.js 中开发一个网站，其中包含一个博客并用于帖子布局，我正在使用由帖子作者设置的背景图像对这个标题进行编码。我仍处于设计阶段，放置元素，空白文本等。

我已经使用 BackgroundImage、graphQL 和 StaticQuery 制作了这个组件，并且在它的代码中，如果我用“post_8.jpg”文本缩小对来自 gatsby-source-filesystem 的图像的搜索范围，它应该可以正常工作。

import React from 'react'
import { graphql, StaticQuery } from 'gatsby'
import BackgroundImage from 'gatsby-background-image'
import TextScramble from './TextScramble'


const BackgroundDiv = ({ className, children }) => (
  <StaticQuery 
    query={graphql`
      query($post: String! ) {
        file(relativePath: {eq: "post_8.jpg"}) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        }
      `
    }
    render={data => {
      const imageData = data.file.childImageSharp.fluid
      return (
        <BackgroundImage
          Tag="div"
          className={className}
          fluid={imageData}
        >
    <h1 className="bg-white shaddow shadow-md py-1 px-4 w-auto …

我用作Firebase后端，架构如下

const sample_data = {
  Name: "",
  Address: "",
  Contact_no: "",
  Email: "",
  img_url: ""
}

首先我用async这样的函数来获取

FetchList.js

let dummy = {}

async function getItems(){
    const response = await fetch('realtime__database__of__firebase__url');
    
    if (!response.ok) {
        throw new Error("Something went wrong");
      }
  
      dummy = await response.json();
}
getItems();
export default dummy;

然后我将检索到的数据传递到我的卡组件，如下所示。

ListHospital.js

import Card from "../UI/Card";
import dummy from "./FetchList";


const ListHospitals = () => {
    return <Card>
        {dummy}
    </Card>
}

export default ListHospitals;

最后，我想访问我在CARD …

目前使用顺风并制作可重用的反应组件面临着这个问题，您可以将一些样式作为顺风类作为道具传递。实际的问题在于“pb-{number}”属性。我可以通过这种方式，并且会很好地工作。“border-{number}”属性也会发生这种情况，但不知何故它接受 border-2 和 border-4 （仅限这些）。

import './button.css'
    
    export default function Button({
        color = "orange",
        inset = "pb-3", <--- this will work
        border = "border-8",
        className, 
        onClick, 
        link
        , ...props}){
        
        return (
            <div onClick={onClick}
            className={`btn-${color} ${border} 
            ${className} ${inset}`}> <--- this will work
                
                <div>
                    {props.children}
                </div>
            </div>

但是，如果我尝试使其更清晰，那么不使用顺风的人只需传递一个值（如下例所示），它将无法工作。

import './button.css'

export default function Button({
    color = "orange",
    inset = "1", <--- this
    border = "4",
    className, 
    onClick, 
    link
    , ...props}){
    
    return (
        <div onClick={onClick}
        className={`btn-${color} border-${border} 
        ${className} pb-${inset}`}> <--- this wont work …