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

2023年8月16日 336次阅读 来源: 誅诺

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方法，希望你习惯这种写法。

    原文作者：誅诺
    原文地址: https://www.jianshu.com/p/4e34b5e4a749
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞