简单易懂的React魔法(06):为页面生成随机数据

Detail组件现在能够接受一个传进来的参数来渲染一句话,同时也能简单的渲染其他合法的es6代码。为了证明这一点,我们引入Chanse库,它能生成随机数据。
在终端中输入:

npm install --save chance

你可能还在运行webpack dev server,你可以按ctrl+c来停止它。然后运行npm。安装完成后输入webpack-dev-server重新启动 webpack dev server。
Chance库可以生成随机姓名,句子,社会安全号码等,这在测试输出一些信息的时候很有用。为了使用它你需要将库导入detail.js,在Detail.js文件头部添加
src/pages/Detail.js

import Chance from 'chance';

现在你可以在render()方法中随机生成姓名:
src/pages/Detail.js

return <p>Hello, {chance.first()}!</p>;

下面给出完整的Detail.js:
src/pages/Detail.js

import React from 'react';
import Chance from 'chance';

class Detail extends React.Component {
    render() {
        return <p>Hello, {chance.first()}!</p>;
    }
}

export default Detail;

如果你保存文件之后回头看浏览器,应该会看到“hello,emma!”或者其他的名字,按f5刷新之后会出现不同的名字。
我们直接在JSX中的大括号里执行了js方法,希望你习惯这种写法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容