Question

我有一个非常简单的问题，以前阅读的所有问题都涉及更复杂的问题，因此我将其发布，希望有人可以帮助我解决这个问题。

我有一个主组件，在其中调用应用程序中的所有其他组件，以在App.js中呈现它们。在此主组件中，我有Home函数组件，该组件呈现了主页。我无法在home组件内部渲染功能组件。我按顺序显示我的代码。

我试图在主组件中传递状态，该组件调用文件“ Desc.js”以检索作为道具发送给Home函数组件的信息，该信息又将道具作为变量{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}/>)}

这将为RenderDesc数组中的每个对象渲染一个DESC

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状态传递给其他组件的prop的组件

2 个答案: