Question

//总代码// 从'反应'导入反应 import'./Aboutus.css' 从'../Home/Header/Header.jsx'导入标题从'../Home/Footer/Footer.jsx'导入页脚 //造型 var stylesheader = { paddingTop：50， textAlign设置： '中心'，颜色：'＃204871' };

    var stylehead = {
      paddingLeft: 200,
      paddingRight:200, 
      paddingTop:20, 
      color: '#204871'
    };

    var styles = {
      paddingTop: 120, paddingLeft:20,
      color: '#128bea', 
      fontSize: 26
    };

    var style1 = {
      paddingTop:100,
      color: '#204871' 
    };
 //code   
    class About extends React.Component {

        render() {

      var title = "we are a team";
    //no of arrays.
      var leadership = [
      {
        "name":"abc",
        "department":"abc",
        "phone":"abc",
        "email":"abc"
      },
      {
         "name":"abc",
        "department":"abc",
        "phone":"abc",
        "email":"abc"
      }
      ];

      var business = [
      {
         "name":"abc",
        "department":"abc",
        "email":"abc"
      },
      {
           "name":"abc",
        "department":"abc",
        "email":"abc"
      },
      ];

      var algorithm = [
      {
           "name":"abc",
        "department":"abc",
        "email":"abc"
      },
      {
           "name":"abc",
        "department":"abc",
        "email":"abc"
      },
      {
          "name":"abc",
        "department":"abc",
        "email":"abc"
      },
      {
           "name":"abc",
        "department":"abc",
        "email":"abc"
      }
      ];

       var developer = [
      {
          "name":"abc",
        "department":"abc",
        "email":"abc"
      },
      {
           "name":"abc",
        "department":"abc",
        "email":"abc"
      },
      {
          "name":"abc",
        "department":"abc",
        "email":"abc"
      }
      ];

         var row1=leadership.map(row => {
                                  return <div className="column">
                                           <div className="card"> 
                                              <div className="container">
                                                  <h2>{row.name}</h2>
                                                  <p>{row.department}</p>
                                                  <p>{row.phone}</p>
                                                  <p>{row.email}</p>
                                              </div>
                                            </div>
                                          </div> 
                                  });

          var row2=business.map(row => {
                                  return <div className="column">
                                           <div className="card"> 
                                              <div className="container">
                                                  <h2>{row.name}</h2>
                                                  <p>{row.department}</p>
                                                  <p>{row.email}</p>
                                              </div>
                                            </div>
                                          </div> 
                                  });

           var row3=algorithm.map(row => {
                                  return <div className="column">
                                           <div className="card"> 
                                              <div className="container">
                                                  <h2>{row.name}</h2>
                                                  <p>{row.department}</p>
                                                  <p>{row.email}</p>
                                              </div>
                                            </div>
                                          </div> 
                                  });

           var row4=developer.map(row => {
                                  return <div className="column">
                                           <div className="card"> 
                                              <div className="container">
                                                  <h2>{row.name}</h2>
                                                  <p>{row.department}</p>
                                                  <p>{row.email}</p>
                                              </div>
                                            </div>
                                          </div> 
                                  });

          return (

             <div className="home-component">

                    <div className="home-header">
                    <Header/>
                    </div>

                    <div className="home-content" >
                                <h1 style={stylesheader}> Meet the team </h1>
                                <h2 style={stylehead}>{title}</h2>

                                <h2 style={styles}> Leadership </h2>
                                <div className="row" style={style1}>
                                  {row1}
                                </div>

                                <h2 style={styles}> Business Development </h2>
                                <div className="row" style={style1}>                    
                                 {row2}                           
                                </div>

                                <h2 style={styles}> Algorithm Development </h2>
                                <div className="row" style={style1} >                    
                                 {row3}                         
                                </div>

                                <h2 style={styles}>Software Development </h2>
                                 <div className="row" style={style1} >                    
                                  {row4}
                                 </div>  
                    </div>

                    <Footer/>

             </div>
        );

        }
    }

    export default About;

Answer 1

您希望尽可能避免重复，因此在您的代码中，我会将每个<h2>块移动到一个简单的函数中，例如：

h2Renderer(title, rowData) {
    return (
        <div>
            <h2 style={styles}>{ title }</h2>
            <div className="row" style={style1}>
              {
                rowData.map((row, index) => {
                    return (
                        <div key={ `h2row-${index}` } className="column">
                           <div className="card"> 
                              <div className="container">
                                  <h2>{row.name}</h2>
                                  <p>{row.department}</p>
                                  { row.phone ? <p>{row.phone}</p> : null }
                                  <p>{row.email}</p>
                              </div>
                            </div>
                        </div>
                    );
                });
              }
            </div>
        </div>
    );
}

由于'手机'似乎是可选的，"ternary expression" '{ row.phone ? <p>{row.phone}</p> : null }'会添加'手机'，如果它是行对象的属性。

在渲染函数'return'语句中为每组行调用此h2Renderer（），并传入标题：

return (
     <div className="home-component">
        <div className="home-header">
        <Header/>
        </div>
        <div className="home-content" >
            <h1 style={stylesheader}> Meet the team </h1>
            <h2 style={stylehead}>{title}</h2>
            { this.h2Renderer(" Leadership ", row1 ) }
            { this.h2Renderer(" Business Development ", row2 ) }
            { this.h2Renderer(" Algorithm Development ", row3 ) }
            { this.h2Renderer(" Software Development ", row4 ) }
        </div>
        <Footer/>
     </div>
    );
}

稍后，我确信你可以通过传入数据数组来减少代码行，并将'title'标题作为组件的道具，并使用h2Renderer中的props而不是传递参数。< / p>

希望优化代码，以减少冗余

1 个答案: