javascript - 如何在我的 React 应用程序中避免 eval 以及您对逻辑的看法？

Question

这是一个简单的反应应用程序。我的组件在组合和继承之间使用了正确的逻辑吗？

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this); 
      }
     handleClick(e) {  /*  this.setState({
     evt: e.target */
     e.preventDefault();
     alert(e.target.tagName);
   
     }
  render() {
    return (
    
       <div><h1>{this.props.title}</h1>
       <img  alt="logo"src={this.props.value} onClick={this.handleClick}/>
       </div>//DIV CLOSING TAG
     
     
    );
  }
}
 class Logo extends React.Component {
  render() {
    //const names = this.props.names;
    const src="/computer.png";
    const title="Votre site web à 49€ par mois";
   return  <div>
      <Header key={src} value={src} title={title} />
    </div>
  }
}

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: "http://localhost:3000/accueil",
      nomP: "accueil"
      
    };
  }
  /*changeColor = () => {
    this.setState({color: "blue",brand:"Cadillac"});
  }*/
  doClick= (e)=>{
     
     e.preventDefault();
     
     let nomPage=e.target.firstChild.nodeValue;
     
    
     this.setState({url: "http://"+e.target.host+"/"+nomPage.toLowerCase(),nomP:nomPage}); 
    
  }
  render() {
    //const nameP=this.props.nameP
    const nameP=["accueil","profil","contact"];
    
    return (
    
    <div>
    {/*
        <h1>Url: {this.state.url}</h1>
        <p>
         Nom de la page: {this.state.nomP}</p>
    
    */}
     
      
        {nameP.map((nomPage)=>(
         <nav><a id="" href=""key={nomPage} value={nomPage} className="link" onClick={this.doClick}>{nomPage.toUpperCase()}</a></nav>))
        }
        
     
      <Article npage={this.state.nomP} />
      </div>
    );
  }
}
class Article extends React.Component {
    constructor(props) {
        super(props);
        //this.handleClick = this.handleClick.bind(this); 
      }
     handleClick(e) {  
   
     e.preventDefault();
     alert(e.target.tagName);
   
     }
  render() {
    
 
  let pages = {"accueil":{"titre":"Lorem ipsum","contenu":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo nibh, scelerisque a mi at, blandit cursus lacus. In hac habitasse platea dictumst. Duis iaculis odio feugiat nulla egestas, bibendum efficitur erat pulvinar. Fusce vestibulum nulla et scelerisque venenatis. Donec rutrum fringilla consectetur. Maecenas euismod augue in erat bibendum, sed dignissim risus placerat. Nam vel vestibulum odio. Etiam maximus dolor sem, nec sodales est ornare eu. Etiam dignissim leo tellus, ac placerat orci consectetur sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc non metus non metus aliquam dapibus. "},               
               "profil":{"titre":"Integer pulvinar","contenu":"Integer pulvinar pharetra eros accumsan aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas diam quam, congue non lectus porta, suscipit semper nulla. Nunc lobortis rutrum semper. Cras nibh urna, pretium et ipsum ullamcorper, aliquam pretium leo. Quisque id elementum urna, vitae aliquam quam. Integer finibus velit quis accumsan ornare. Phasellus dictum bibendum tincidunt. Nullam sodales risus dui, vel convallis felis accumsan id. Praesent mattis vulputate elit in dictum. Duis eget tristique erat. Vestibulum rutrum, risus et fermentum mattis, augue leo tincidunt diam, nec suscipit nisl lacus quis massa."},
               "contact":{"titre":"Sed aliquet","contenu":"Sed aliquet tellus nunc, sit amet laoreet purus dictum vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum imperdiet vehicula magna, in malesuada odio. Nulla quis nibh fringilla, lobortis nisl sit amet, vehicula augue. Donec ac mi a augue tempor consectetur vel faucibus mi. Vestibulum mollis consectetur facilisis. In nec luctus est. Vestibulum mattis rutrum justo in interdum. Integer in lorem in nisi sagittis fermentum eget nec justo. Phasellus rhoncus augue vel ipsum posuere tempus. Nullam consequat ultricies sem sagittis finibus. Etiam gravida euismod rutrum. Nullam dapibus vulputate fringilla. Duis et risus cursus, congue leo at, mattis nisl. Etiam ullamcorper arcu id feugiat bibendum. Mauris condimentum mauris sed risus porttitor varius. "}}; 
               for (const property in pages) {
                   
                   if(property===this.props.npage.toLowerCase()){
                   
                   var nP=property;
                   
                   }
                   
               
                }
                // THE TROUBLE WITH EVAL
                let titre=eval("pages."+nP+".titre");
                let contenu=eval("pages."+nP+".contenu");
                
    return (
       
       <div>
       {/* <h1>{this.props.npage.toLowerCase()}</h1>*/}
                                                             
            <h1>{titre}</h1>
            <p>{contenu}</p>
            
             <Footer npage={nP} />
       </div>//DIV CLOSING TAG
     
     
    );
  }
}
class Footer extends React.Component {
  constructor(props) {
        super(props);
        
  } 
  render() {
    
   return  <div>
      
      <p className="copyright">© Copyright <strong>{"http://localhost:3000/"+this.props.npage}</strong>. All Rights Reserved. 2020</p>
      <p>Designed by Laurent Gevaert</p>
    </div>
  }
}







ReactDOM.render(<Logo />, 
                document.getElementById('header')
);
ReactDOM.render(<Menu />, 
                document.getElementById('menu')
);

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    
    <title>React App</title>
  </head>
  <body>
    <div id="header"></div>
    <div id="menu"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
</html>

我不清楚组件之间的组件关系之间的联系以及如何避免“评估”

标签： javascriptreactjs