×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 10 –输出动态内容

    课程清单

    在上一课中,我们看到了组件的重复。因此,让我们深入研究将一些动态内容放入湖北福彩中。
    到目前为止,我们总是对一些HTML元素和之间的一些文本进行硬编码。

    JSX中的动态内容

    Let’s say <p> I am a Person and I am x year old!</p> but x should actually be a random number, and we can simply do that. We can replace x with a random number.

    src / Person / Person.js
    
    import 反应from 'react';
    const person = () => {
    	return <p> I am a Person and i am Math.floor(Math.random() * 30) year old!</p>;
    };
    export  默认  person;
    

    If we output the tat code we see that just text is been outputed instade of number. this makes sense how would 反应know to execuate Math.floor(Math.random() * 30) as javascript. If we have some dynamic content in our JSX part which we want to run as javascript code and not interpret as text.
    For that we have to wrap into single curly braces i.e { /* Javascript code */ }, so let’s do that

    src / Person / Person.js
    
    import 反应from 'react';
    const person = () => {
    	return <p> I am a Person and i am {Math.floor(Math.random() * 30)} year old!</p>;
    };
    export  默认  person;
    

    现在,如果保存并在浏览器中看到,您将获得随机数。每次重新加载时,它都会获得随机数。

    注意:
    This is super important, As we see that we can output the dynamic content as part of our JSX content. We can’t define javascript class in there or anything like that. We can execute one line expressions, Short simple expressions like simple calculations or function calls.
    我们将在事件处理程序中看到函数调用。

    现在,我们可以输出动态内容了。我们为什么不将其带入一个新的水平,使我们的组件更具活力?这样我们就可以保留一些通用内容(例如人和随机数)的输出,而不必做其他事情来通过 src / App.js file. Maybe some HTML attribute we passed to person to configure what we want the output for each usage of <Person /> component. will see that in the next lesson.

    反应introduction
    反应Component
     动态内容
  • 启用通知    不用了,谢谢