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

  • 29 – Setting Class Names Dynamically 在 反应

    课程清单
    [在湖北福彩中动态设置类名,在湖北福彩中动态设置类名]

    在上一课中,您将学习如何动态设置样式,然后学习使用简单的javascript操纵然后绑定到该style属性的任何内容。
    Now className also can be set dynamically like for the className='App' in src / App.js
    但是我们也引入了一个新课程,让您可以玩一些游戏。

    例如:我们想要更改代码中的某些内容,例如我们拥有3人元素,并且可能想要将文本颜色设置为RED,将在 src / App.css。甚至可能我们将其设为粗体,因此在同一文件中将创建一个名为 .bold

    src / App.css
    
    .App {
    	text-align: center;
    }
    .red {
    	color: red;
    }
    .bold{
      font-weight: bold;
    }
    

    因此,我们使用了2个在全球范围内可用的新CSS类,但现在我不使用任何CSS类。
    src / App.js 我想在某个静态段落上动态设置className。

    src / App.js
    
    ...
    render() {
    	return (
    		<div className="App">
    			<button style={style} onClick={this.togglePersonsHandler}>
    				Toggle Persons
    			</button>
          <p>Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
    		</div>
    	);
    }
    ...
    

    Now I want to set the className 的 that paragraph dynamically depending on the length 的 the elements in my persons array

    健康)状况:
    低于2或少于2,则为红色

    1或少于1会转换RED和BOLD。

    So to do that, 的 course, I need to adjust the classes or the className I set to that mention paragraph dynamically.
    我要做的是在中创建一个新变量 App.js 命名为类,它将是一个 array strings 这是这样做的一种方式。

    src / App.js
    
    ...
    render() {
      let classes = ['red', 'bold'].join(' ');    // Class names defined in 的CSS (Array<string>)
    	return (
    		<div className="App">
    			<button style={style} onClick={this.togglePersonsHandler}>
    				Toggle Persons
    			</button>
          <p>Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
    		</div>
    	);
    }
    ...
    
    .join() :它转换 array strings 一串,即“红色粗体”

    “红色粗体”:这是一个有效的CSS类列表,我们可以分配两个类名称,当然我可以手动创建此名称,但是我很快将动态添加该数组,这就是为什么我想要一个通用的解决方案。
    Now will bind the variable in className 的 the mentioned paragraph.

    src / App.js
    
    ...
    render() {
      let classes = ['red', 'bold'].join(' ');    // Class names defined in 的CSS (Array<string>)
    	return (
    		<div className="App">
          ...
          <p className={classes} >Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
    		</div>
    	);
    }
    ...
    
    注意: just keep in mind classes is string at the end.

    默认情况下,会将这些类添加到该段落中。现在,我们可以为其添加一些动态性质。我们只想ddo,如果少于1人,则为红色;如果少于2人,则为红色;如果我们拥有所有三个人,则应附加红色。

    src / App.js
    
    ...
    const classes = [];
    if (this.state.persons.length <= 2) {
    	classes.push('red');
    }
    if (this.state.persons.length <= 1) {
    	classes.push('bold');
    }
    return (
    	<div className="App">
        ...
      <p className={classes.join(' ')} >Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
    	</div>
    );
    ...
    

    对于动态条件操作,我更改了使其工作的逻辑。

    反应introduction
    反应Component
    在湖北福彩中动态设置类名
  • 启用通知    不用了,谢谢