React

来源：互联网发布：ps淘宝店招尺寸怎么改编辑：程序博客网时间：2024/06/03 08:17

使用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>

阅读全文

0 0