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

  • 28 – 动态设置样式 In 反应Component

    课程清单
    [在大乐透综合基本走势图组件中动态设置样式,在大乐透综合基本走势图组件中动态设置样式]

    因此,如果上一课概述了问题集。让我们根据是否要显示人物来动态调整按钮样式。
    Now we already have a look at how to dynamically render content like we handled if the statement of this.state.showPersons where we store some JSX into a variable and then output that variable in our template or our return function.
    As always everything in render() is javascript so if we assign a style to the button i.e. between the curly braces it can be any javascript expression.

    动态设置样式

    Therefore if this.state.showPersons is true this means persons can be seen, so as I outlined in the last lesson the button should have a red background because a click will remove the persons.
    另一方面,默认设置应该不是白色背景,而是绿色,我们可能想将文本颜色设置为白色

    src / App.js
    
    const style = {
    	background: 'green',
    	font: 'inherit',
    	border: '1px solid black',
    	padding: '8px',
    	borderRadius: '4px',
    	boxShadow: '0 2px 3px #ccc',
    };
    return (
    	<div className="App">
    		<button style={style} onClick={this.togglePersonsHandler}>
    			Switch Name
    		</button>
    	</div>
    );
    

    如果我们保存此按钮,我们可以将按钮设为绿色背景色。
    now the person is visible though the button background color should turn to red, So what we can do is in our if(this.state.showPersons) a statement which we already have where we set a person’s variable we can, of course, do more besides setting the persons variable after that we can also reach out to style and set the background color property which the style object has to RED.

    src / App.js
    
    const style = {
    	background: 'green',
    	font: 'inherit',
    	border: '1px solid black',
    	padding: '8px',
    	borderRadius: '4px',
    	color: 'white',
    	boxShadow: '0 2px 3px #ccc',
    };
    if (this.state.showPersons) {
       persons = (
         // ...
       );
       style.background = 'red';
    }
    

    有了这个微小的更改,我们已经有了动态样式。运行该应用程序并进行测试。
    因此,这表明了一件至关重要的事情,如果您还没有的话,则必须包住头。一切都是JavaScript。
    您可以使用所需的任何JavaScript代码来处理样式对象,最后,当您绑定它时,无论您如何对其进行编辑,它都将简单地应用。


    Now What About className though?
    我们还可以动态设置吗,可以传递类名列表吗? 我们可以!。在下一课中,我将向您展示其工作方式。

    反应introduction
    反应Component
    动态设置样式 In 反应Component
  • 启用通知    不用了,谢谢