React

使用Anit Design

根據樣式選擇複製代碼。

注意執行 export default Form.create()(TestPage);

跳轉方式一

  // 跳轉主頁面
 window.location.href = '/';

前提在路由裏定義

跳轉方式二

  browserHistory.push('/select-identity');

同樣是需要路由配置
部分二級路由需要攜帶參數例如ID等

跳轉方式三

 <a href="./Register">register now!</a>

React動態生成view示例

根據接口數據生成view

 .then((json) => {
                // console.log(json);
                const matchCompanysOptions = json.map((company) => {
                    return <li key={company.id}><img src={company.logoUrl} alt={company.id}/></li>;
                });
                this.setState({matchCompanysOptions});
            })

數組？？？的循環遍歷

 .then((json) => {
        // console.log(json);
        const matchExportsOptions = [];
        for (let i = 0; i < (json.length % 2 === 0 ? json.length : json.length - 1); i += 2) {
          const matchExportsOption = (<Carousel.Item key={i}>
            <div className="home-experts-Carousel-item-content">
              <div className="home-experts-Carousel-item-content-left">
                <a href={`experts/experts-details/${json[i].id}`} className="item-img-link" data-id="131889">
                  <img width={276} height={280} alt="" src={json[i].avatarUrl} />
                </a>
                <div>
                  <a href={`experts/experts-details/${json[i].id}`} className="item-title-link" data-id="131889">
                    <h2 className="home-experts-content-title">{json[i].realName}</h2>
                  </a>
                  <p className="home-experts-content">{json[i].profile} </p>
                </div>
              </div>
              <div className="home-experts-Carousel-item-content-right">
                <a href={`experts/experts-details/${json[i + 1].id}`} className="item-img-link" data-id="131889">
                  <img width={276} height={280} alt="" src={json[i + 1].avatarUrl} />
                </a>
                <div>
                  <a href={`experts/experts-details/${json[i + 1].id}`} className="item-title-link" data-id="131889">
                    <h2 className="home-experts-content-title">{json[i + 1].realName}</h2>
                  </a>
                  <p className="home-experts-content">{json[i + 1].profile} </p>
                </div>
              </div>
            </div>
          </Carousel.Item>);
          matchExportsOptions.push(matchExportsOption);
        }
        this.setState({
          matchExportsOptions,
        });
      })

引用動態view

  <Carousel
          className="home-experts-Carousel"
          prevLabel=""
          nextLabel=""
          indicators={false}
          prevIcon={<span className="home-experts-arrow-left" />}
          nextIcon={<span className="home-experts-arrow-right" />}
        >
          {this.state.matchExportsOptions}
        </Carousel>