react获取dom元素(react条件渲染的几种方式)

1、在React中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

2、React中的条件渲染和JavaScript中的一样，使用JavaScript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据它们来更新UI。

3、return<h1>Welcomeback!</h1>;

4、return<h1>Pleasesignup.</h1>;

5、再创建一个Greeting组件，它会根据用户是否登录来决定显示上面的哪一个组件。

6、constisLoggedIn=props.isLoggedIn;

7、//TrychangingtoisLoggedIn={true}:

8、<GreetingisLoggedIn={false}/>,

9、document.getElementById('root')

10、这个示例根据isLoggedIn的值来渲染不同的问候语。

11、你可以使用变量来储存元素。它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

12、观察这两个组件，它们分别代表了注销和登录按钮：

13、<buttononClick={props.onClick}>

14、<buttononClick={props.onClick}>

15、在下面的示例中，我们将创建一个名叫LoginControl的有状态的组件。

16、它将根据当前的状态来渲染<LoginButton/>或者<LogoutButton/>。同时它还会渲染上一个示例中的<Greeting/>。

17、classLoginControlextendsReact.Component{

18、this.handleLoginClick=this.handleLoginClick.bind(this);

19、this.handleLogoutClick=this.handleLogoutClick.bind(this);

20、this.state={isLoggedIn:false};

21、this.setState({isLoggedIn:true});

22、this.setState({isLoggedIn:false});

23、constisLoggedIn=this.state.isLoggedIn;

24、button=<LogoutButtononClick={this.handleLogoutClick}/>;

25、button=<LoginButtononClick={this.handleLoginClick}/>;

26、<GreetingisLoggedIn={isLoggedIn}/>

27、document.getElementById('root')

28、声明一个变量并使用if语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 *** X中内联条件渲染的 *** 。

29、通过花括号包裹代码，你可以在 *** X中嵌入任何表达式。这也包括JavaScript中的逻辑与(&&)运算符。它可以很方便地进行元素的条件渲染。

30、constunreadMessages=props.unreadMessages;

31、{unreadMessages.length>0&&

32、Youhave{unreadMessages.length}unreadmessages.

33、constmessages=['React','Re:React','Re:Re:React'];

34、<MailboxunreadMessages={messages}/>,

35、document.getElementById('root')

36、之所以能这样做，是因为在JavaScript中，true&&expression总是会返回expression,而false&&expression总是会返回false。

37、因此，如果条件是true，&&右侧的元素就会被渲染，如果是false，React会忽略并跳过它。

38、另一种内联条件渲染的 *** 是使用JavaScript中的三目运算符condition?true:false。

39、在下面这个示例中，我们用它来条件渲染一小段文本

40、constisLoggedIn=this.state.isLoggedIn;

41、Theuseris<b>{isLoggedIn?'currently':'not'}</b>loggedin.

42、同样的，它也可以用于较为复杂的表达式中，虽然看起来不是很直观：

43、constisLoggedIn=this.state.isLoggedIn;

44、<LogoutButtononClick={this.handleLogoutClick}/>

45、<LoginButtononClick={this.handleLoginClick}/>

46、就像在JavaScript中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何提取组件。

47、在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让render *** 直接返回null，而不进行任何渲染。

48、下面的示例中，<WarningBanner/>会根据prop中warn的值来进行条件渲染。如果warn的值是false，那么组件则不会渲染:

49、<divclassName="warning">

50、classPageextendsReact.Component{

51、this.state={showWarning:true};

52、this.handleToggleClick=this.handleToggleClick.bind(this);

53、showWarning:!state.showWarning

54、<WarningBannerwarn={this.state.showWarning}/>

55、<buttononClick={this.handleToggleClick}>

56、{this.state.showWarning?'Hide':'Show'}

57、document.getElementById('root')

58、在组件的render *** 中返回null并不会影响组件的生命周期。例如，上面这个示例中，componentDidUpdate依然会被调用。

59、经典前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。