javascript - 无法呈现将 React 状态传递给另一个组件的 Prop 的组件

Question

我有一个相当简单的问题，而我之前阅读的所有问题都涉及更复杂的问题，所以我将其发布，希望有人能帮助我解决这个问题。

我有一个主组件，我在其中调用应用程序中的所有其他组件，以在 App.js 中呈现它们。在这个主组件内，我有 Home 功能组件，它呈现主页。我无法设法在主组件内呈现功能组件。我按顺序展示我的代码。

我尝试传递主组件中的状态，它调用文件“Desc.js”来检索作为 Prop 发送到 Home 函数组件的信息，该组件又将此 Prop 作为变量 {item} 发送到RenderDesc函数组件

这是 App.js

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';

class App extends Component {
  render(){
    return (
      <BrowserRouter>
        <div>
          <Main />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

这是 MainComponent.js

import React, { Component } from 'react';
import Header from './include/HeaderComponent';
import Footer from './include/FooterComponent';
import Home from './HomeComponent';
import Login from './LoginComponent';
import {DESC} from '../shared/Desc.js';
import {Switch, Route, Redirect} from 'react-router-dom';

class Main extends Component {
  constructor(props){
    super(props);
    this.state={
      contents: DESC
    }
  }
  render(){
    const HomePage = () => {
      return(
        <Home content = {this.state.contents}
        />
      );
    }
    return(
      <div>
        <Header />
        <div className="container">
          <Switch>
            <Route path = "/home" component = {HomePage} />
            <Route exact path = '/login' component = {Login} />
            <Redirect to = "/home"></Redirect>
          </Switch>
        </div>
        <Footer />
      </div>
    );
  }
}

export default Main;

这是 HomeComponent.js

import React from 'react';

function RenderDesc({item}){

        return(
            <div id={item.desc_id} className="row row-content align-items-center">
                <div className="col-12 col-sm-4 col-md-3">
                    <img src={item.desc_image} className="img-ex img-fluid" alt={item.desc_image_alt}/>
                </div>
                <div className="col col-sm col-md">
                    <p>{item.desc_content1}</p>
                    <p>{item.desc_content2}</p>
                </div>
            </div>
        );
}

function Home(props){
    return(
        <div className="container">
            <div className="cover-container mx-auto flex-column">
                    <div className="inner cover text-center">
                    <h1 className="cover-heading">Data to take <br />Control</h1>
                    <p className="lead">We create the efficient and effective solution
                        your organization needs to act informed and on time.</p>
                    <p className="lead">
                        <a href="#about" className="btn btn-lg btn-secondary">Find out more</a>
                    </p>
                </div>
            </div>
            <RenderDesc item={props.content}/>
        </div>
    );
}

export default Home;

这是Desc.js的内容

export const DESC=
[
  {
    desc_id: 1,
    desc_content1: 'As time passes, the accumulation of spreadsheets and even shared documents to manage the operation of your business in a daily basis, becomes complicated and slow down common tasks. This can significantly impact your team’s performance.',
    desc_content2: 'We develop personalized implementations to respond our customer’s needs. We aim to integral solutions that scans the processes, identify the main features and smooth the user interface with friendly tools, easy to manage.',
    desc_image: 'images/icons/phone.png',
    desc_image_alt: 'phone',
  },
  {
    desc_id: 2,
    desc_content1: 'Take the step to a real virtualization and automation of your processes can be challenging, moreover when is desired to avoid any disruption. Although, to hold competitivenes and increase efficiency, is an issue that must be addressed. When is possible, graduality is an effective strategy.',
    desc_content2: 'We develope solutions that adapts to requirements, printing on back-end and front-end developments, ease and simplicity that enables a smooth adaptation of the team. This creates trust and helps to draw their attention from the repetitive and lateral tasks, towards the operations that requires the professional’s criteria and flexibility.',
    desc_image: 'images/icons/mind.png',
    desc_image_alt: 'mind',
  }
]

但最终，Desc.js 中的内容永远不会被渲染。请帮忙

Answer 1

DESC 是一个数组。然而，您似乎正试图将其渲染为单个对象。尝试改变...

<RenderDesc item={props.content}/>

在 Home 组件中...

{props.content.map(item => <RenderDesc key={item.desc_id} item={item}/>)}

这将为 DESC 数组中的每个对象呈现一个 RenderDesc