尝试使用返回按钮组件但未呈现任何内容的函数

Question

我正在尝试使用返回按钮组件的函数，但是在调用此函数时，按钮组件没有呈现。除此函数外的所有渲染。我没有错误没有警告，我试图将此功能分离到一个单独的文件中，但仍然没有为该功能渲染。 我正在使用反应引导。我尝试调用的函数是 activeProcessingBtn

const activeProcessingBtn = () => {
return (
<div>
<Button variant="primary" disabled>
<Spinner
as="span"
animation="grow"
size="sm"
role="status"
aria-hidden="true"
/>
processing...
</Button>
</div>
);
};
function Machines() {
const [machineInfo, setMachineInfo] = useState({
id: 0,
name: "Choose Machine"
});
const [isProcessing, setIsProcessing] = useState(true);
const Machiness = [
{ id: 1, name: "Machine1" },
{ id: 2, name: "Machine2" },
{ id: 3, name: "Machine3" }
];
const selectHandler = (NewName, NewID) => {
setMachineInfo({ id: NewID, name: NewName });
};
const AddMachinesToDropDownItem = Machiness.map(({ id, name }) => {
return (
<Dropdown.Item
eventKey={id}
value={name}
className="DropdownItem"
onClick={() => selectHandler(name, id)}
>
{name}
</Dropdown.Item>
);
});

return (
<div>
<h6> Get attendance Manually </h6>
<DropdownButton id="DropDownMenu" title={machineInfo.name}>
{AddMachinesToDropDownItem}
</DropdownButton>
<activeProcessingBtn />
</div>
);
}
export default Machines;

Answer 1

与其尝试将其视为组件(<activeProcessingBtn />(，不如将其称为函数。

return (
<div>
<h6> Get attendance Manually </h6>
<DropdownButton id="DropDownMenu" title={machineInfo.name}>
{AddMachinesToDropDownItem}
</DropdownButton>
// See here
{activeProcessingBtn()}
</div>
);

Answer 2

所有组件名称都应以大写字母开头。这就是 React 用来确定它是否应该将元素视为本机 HTML 元素并将其传递给浏览器或进一步解析它呈现的内容的方法。因此，您最好的选择是将函数重命名为ActiveProcessingBtn或ActiveProcessingButton.