Question

我有三个文件mydetails.js，myinfo.js和App.js。在mydetails.js中，我使用了带箭头功能的道具。在myinfo.js中，我导入了mydetails.js。在myinfo中，我使用了类和组件。我已经通过map方法在列表中捕获了mydetails.js的所有道具。我已经通过转换为myinfo.js的return方法中的字符串来返回列表。我已将此myinfo.js导入App.js。通过带有组件= {myinfo}的Route，我尝试渲染。

// App.js文件

import Myinfo from './Layout/Myinfo';
class App extends Component {

  render(){ 
  return (
    <Router>
      <nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
     <a class="navbar-brand" href="/">Info</a>
     <div id="navb" class="navbar-collapse collapse hide">
     <ul class="navbar-nav">
      <li class="nav-item active"><Link to="/">Home </Link></li>
      <li class="nav-item"> <Link to="/myinfo">Mydetails </Link></li>
      <li class="nav-item"><Link to ="/about">About </Link></li>
    </ul>

     <ul class="nav navbar-nav ml-auto">
      <li class="nav-item"><span class="fas fa-sign-in-alt"></span><Link to="/login">Login </Link>  </li>
    </ul>

  </div>
</nav>
     <div className="App">
      <Route exact path="/"  component={Home}/> 
      <Route path="/myinfo" component={Myinfo}/>
      <Route path="/about"  component ={About} />
      <Route path="/login"  component={Login}/>

      </div>
    </Router>
  );
}
}
export default App;

// Mydetails.js文件

const mydetails=(props)=>{

    return(
     <div className="details" >
         <h1> My Info</h1>
        <h2 id="info">FirstName :{props.firstname}</h2>
        <h2 id="info">LastName  :{props.lastname}</h2>
        <h2 id="info">Gender    :{props.gender}</h2>
        <h2 id="info">DOB       :{props.dob}</h2>
        <h2 id="info">Graduation:{props.degree}</h2>
        <h2 id="info">College    :{props.college}</h2>
     </div>

   )
};
export default mydetails;

// Myinfo.js文件

import Mydetails from './Mydetails';
class Myinfo extends Component{

    state={
        details :[
          {firstname:'####', lastname:'####',gender:'###',dob:'#####', degree:'#####',
            college:'###'}

        ]
      };

      render(){
      const info=this.state.details.map(detail=>{
            return <Mydetails 
            firstname={detail.firstname}
            lastname={detail.lastname}
            gender={detail.gender}
            dob={detail.dob}
            degree={detail.degree}
            college={detail.college}

            />
          })
          const infostring=info.join(' ');      
        return(
             <div>
                 {infostring}
             </div>
          );
      } 

}
export default Myinfo;

我正在获得[对象对象]而不是道具

谢谢。

Answer 1

只需删除const infostring = info.join（''）;在Myinfo.js文件中，然后直接返回信息，如下所示：

return(
  <div>
    {infostring}
  </div>
);

// Myinfo.js文件

import Mydetails from './Mydetails';
class Myinfo extends Component{

    state={
        details :[
          {firstname:'####', lastname:'####',gender:'###',dob:'#####', degree:'#####',
            college:'###'}

        ]
      };

      render(){
      const info=this.state.details.map(detail=>{
            return <Mydetails 
            firstname={detail.firstname}
            lastname={detail.lastname}
            gender={detail.gender}
            dob={detail.dob}
            degree={detail.degree}
            college={detail.college}

            />
          })

        return(
             <div>
                 {info}
             </div>
          );
      } 

}
export default Myinfo;

渲染路线中的组件

1 个答案: