×
  • 反应–完整指南(包括React Router 4& Redux)

  • 28 –在React组件中动态设置样式

    Lesson List
    [在反应组件中动态设置样式,在反应组件中动态设置样式]

    因此,如果在最后一课中概述的问题设置。让我们动态调整按钮样式,具体取决于我们即将显示的人。
    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?
    我们还可以动态设置这个吗,我们可以通过类名列表吗? 我们可以!。我会向您展示它在下一个课程中的工作原理。

    React introduction
    React Component
    在React组件中动态设置样式
  • 启用通知    好的 不,谢谢
    发布时间: 2021-05-09 20:54:46

    最近发表