无法呈现将 React 状态传递给另一个组件的道具的组件

Question

我有一个相当简单的问题，而我之前阅读的所有问题都涉及更复杂的问题，所以我 post 它，希望有人能帮助我。

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

我试图在主组件中传递状态，它调用文件 "Desc.js" 来检索作为 props 发送到 Home 函数组件的信息，后者又将这个 props 作为变量 {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

Answer 2

您好，您的内容是 {} 的 []。你应该映射它并迭代它。


function RenderDesc({items}){

return(
   items.map(item=>(<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 items={props.content}/>
   </div>
);
}

无法呈现将 React 状态传递给另一个组件的道具的组件

Cannot render Component passing React state to props for another Component

javascript

reactjs

react-props

react-state