返回基于if语句的网页布局

Question

我想返回一些基于多达30个不同条件语句的网页布局。在我的例子中，我只给出一个，这样它就有意义了。

import React from 'react';
import { Typography } from '@material-ui/core';
import { personSafety } from './modals/PersonSafety';
export default function TagContent(props) {
if (props.tagText === 'Person is unsafe') {
return <personSafety />;
}
}

如果标签文本="人员不安全"，我希望它显示文件personSafety中的一些网页代码。

下面是我在PersonSafety.js页面上的代码。

import React from 'react';
import { Typography } from '@material-ui/core';
export const personSafety = `
<Typography gutterBottom>
Person is not very safe
</Typography>`;

我认为我做这一切都错了，因为它不起作用。

我需要做些什么才能让它正常工作？

Answer 1

• 您需要使用以大写字母开头的名称来命名PersonSafety，否则personSafety将被JSX视为HTML标记
• 如果您希望将PersonSafety与<PersonSafety />一起使用，则需要将其作为一个真正的组件函数

import React from 'react';
import { Typography } from '@material-ui/core';
export const PersonSafety = () => (
<Typography gutterBottom>
Person is not very safe
</Typography>
);

你现在可以进行

import { PersonSafety } from './modals/PersonSafety';
export default function TagContent(props) {
if (props.tagText === 'Person is unsafe') {
return <PersonSafety />;
}
}