数据在反应功能中不可见 - 为什么？ [复制]答案

【问题标题】：Data not visible in react function - Why? [duplicate]数据在反应功能中不可见 - 为什么？ [复制]
【发布时间】：2021-03-30 05:48:54
【问题描述】：

我是 React 的新手，我正在使用它来熟悉它。

我有一个组件，它只是放置一个标题和一个从另一个组件调用的数据网格。

主要组件：

import './App.css';
import React,{useState} from 'react';
import {Container,Row, Col } from 'react-bootstrap';
import aboutData from './aboutData';

function About() {
  **const [name, setName]= "This is the name"**
  return (
    <div>
        <h1>About page with aboutData</h1>
        <aboutData data = {name}/>
    </div>
  );
}

export default About;

其他功能：

import './App.css';
import React from 'react'
import {Container,Row, Col } from 'react-bootstrap';

function aboutData({data}) {
  return (
    <li>
        <h3>Inside grid component</h3>
      <Container>
        <Row>
          <Col>{this.data }</Col>
          <Col xs={6}>{this.data}</Col>
          <Col>3 of 3</Col>
        </Row>
        <Row>
          <Col>1 of 3</Col>
          <Col xs={5}>2 of 3 (wider)</Col>
          <Col>3 of 3</Col>
        </Row>
      </Container>
    </li> 
  );
}

export default aboutData;

我正在传递一个测试值“这是名称”，但 aboutData 类从不呈现。有人能告诉我我哪里做错了吗？

【问题讨论】：

组件大写
你不需要this关键字来访问道具。只需在 aboutData 组件中使用data。因为您正在使用功能组件和解构。 aboutData({data})
这里很好地解释了为什么小写组件名称不起作用：stackoverflow.com/questions/30373343/…
感谢您的 cmets。这里附上了工作代码。是的，我知道现在小写和大写组件名称之间存在差异，这要归功于 Nick。

标签： javascript reactjs function

【解决方案1】：

将参数名称从父组件传递到智利组件的工作代码。 组件名称应该以大写字母开头。在我的例子中，它应该是'AboutData'而不是'aboutData'。

家长：

import './App.css';
import React,{useState} from 'react';
import {Container,Row, Col } from 'react-bootstrap';
import AboutData from './AboutData';

function About() {
  const [name, setName]= useState('This is the name from hook');


  return (
    <div>
        <h1>About page with aboutData</h1>
        {/* <AboutData data = {name}/> */}
        <AboutData data = {name}/>
        </div>
  );
}

export default About;

孩子：

import './App.css';
import React from 'react'
import {Container,Row, Col } from 'react-bootstrap';

// function AboutData({data}) {
function AboutData({data}) {
  return (
    <li>
        <h3>Inside grid component</h3>
      <Container>
        <Row>
          <Col>{data}</Col>
          <Col xs={6}>2</Col>
          <Col>3 of 3</Col>
        </Row>
        <Row>
          <Col>1 of 3</Col>
          <Col xs={5}>2 of 3 (wider)</Col>
          <Col>3 of 3</Col>
        </Row>
      </Container>
    </li> 
  );
}

export default AboutData;

【讨论】：