react 写一个条件渲染

以下是一个简单的条件渲染的 React 代码示例：

import React from 'react';

function ConditionalRendering(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

export default ConditionalRendering;

在上面的代码中，我们定义了一个名为 ConditionalRendering 的函数组件，它根据 isLoggedIn 属性的值来渲染不同的内容。如果 isLoggedIn 为 true，则返回一个包含“Welcome back!”的 h1 元素，否则返回一个包含“Please log in.”的 h1 元素。

我们可以在父组件中使用这个组件，并传递一个 isLoggedIn 属性：

import React from 'react';
import ConditionalRendering from './ConditionalRendering';

function App() {
  return (
    <div>
      <ConditionalRendering isLoggedIn={true} />
    </div>
  );
}

export default App;

在上面的代码中，我们将 ConditionalRendering 组件作为一个子元素渲染在 div 元素中，并传递了一个 isLoggedIn 属性值为 true。

在浏览器中运行这个应用程序，你将会看到一个包含“Welcome back!”的 h1 元素。如果我们将 isLoggedIn 属性改为 false，则会看到一个包含“Please log in.”的 h1 元素。