javascript - React 中的搜索组件未显示在应用程序组件上

Question

我正在尝试在 React 中的主应用程序上显示一个搜索栏。为此，我创建了一个名为 searchBox 的新组件以供稍后使用，因此我不能直接将输入应用到我的 App.js 文件中。

我的 App.JS 文件代码如下所示:

import React, { Component } from 'react';
import CardList from './CardList';
import searchBox from './searchBox';
import { robots } from './robots';


const App = () => {
return (
    <div>
        <h1> Contacts </h1>
        <searchBox />
        <CardList robots={robots} />
    </div>  
)
}

export default App;

我的 searchbox.js 文件如下所示:

import React from 'react';

const searchBox = () => {
return(
    <input type='search' placeholder='search contacts' />
);
}

export default searchBox;

标题已显示，但搜索框未显示。我将文件作为 searchBox 保存在 src 文件夹中，因此我认为问题与将文件保存在错误的位置无关。

Answer 1

用户定义的组件必须大写。

https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized