如何在App.js中渲染类组件SearchForm？附组件代码

嘿，我来帮你搞定这个问题！要在App.js里渲染你的SearchForm组件，其实很简单，跟着这几步来就行：

• 第一步：先修正组件的小错误
  我注意到你写的类名是SeacrhForm（拼写少了个r），和文件名SearchForm.js不一致，先把类名改成SearchForm，不然导入的时候会出问题。另外，你的render方法里的JSX没写完，记得把<h1>标签闭合、补全</form>标签，不然会报语法错误哦。还有，别忘记导出组件！修正后的核心代码如下：

  class SearchForm extends React.Component {
    constructor(props) {
      super(props)
      this.state = { keywords: '', city: '', date: '' }
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
    render() {
      return (
        <form className='search-form' onSubmit={this.handleSubmit}>
          <h1>搜索表单</h1>
          {/* 这里可以添加你的表单输入框等元素 */}
        </form>
      )
    }
  }
  
  export default SearchForm;
  

• 第二步：在App.js中导入SearchForm组件
  打开你的App.js文件，在顶部添加导入语句，如果App.js和SearchForm.js在同一个目录下，就这么写：

  import SearchForm from './SearchForm';
  

  如果不在同一个目录，就调整路径，比如./components/SearchForm这样。

• 第三步：在App组件中使用SearchForm
  不管你的App是函数组件还是类组件，都可以直接把<SearchForm />当作普通HTML标签一样用在return里。
  举个函数组件的例子：

  import React from 'react';
  import SearchForm from './SearchForm';
  
  function App() {
    return (
      <div className="App">
        {/* 这里就是渲染搜索表单的地方 */}
        <SearchForm />
      </div>
    );
  }
  
  export default App;
  

  如果是类组件的App.js：

  import React from 'react';
  import SearchForm from './SearchForm';
  
  class App extends React.Component {
    render() {
      return (
        <div className="App">
          <SearchForm />
        </div>
      );
    }
  }
  
  export default App;
  

• 最后一步：确保入口文件正确渲染App
  你的React项目入口一般是index.js，里面应该有渲染App组件的代码，类似这样：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

  这样启动项目后，App组件会被渲染，里面的SearchForm也就跟着显示出来啦！

内容的提问来源于stack exchange，提问作者Heidel