在ReactJS中，有没有任何方法可以对组件使用小写字母？

Question

我试图制作一些组件，我是React的新手，我尝试了一些基础知识，比如创建存储的简单组件

import React from "react";
import Myfunc from "./something.js";
function App(){
    return(
       <div>
         <Myfunc/>
       </div>
    );
}
export default App;




Answer 1

您可以使用小写名称的React组件，但不能在JSX中使用它们。

如果您严格地说不想将第一个字母大写，或者不想将其重新分配给大写变量（ReactComp=ReactComp），那么您可以采用这种难看的方法。

const myFunc = (props) => {
  const { name, children } = props;
  return <div>
    <h1> {name} </h1>
    <h3> a lower case component </h3>
    {children}
  </div>
}

const App = props => {
  return (
    React.createElement(
      myFunc,
      {
        name: 'My Func',
        // other props
      },
      <h6>This is a child component</h6>,
      <h6>This is another child component</h6>
    )
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

Answer 2

这是一些文件的一部分…也许从这里你可以得到一个更好的想法。

当一个元素类型以小写字母开头时，它引用一个内置组件，如or，并导致传递给React.createElement的字符串'div'或'span'。以大写字母开头的类型，如compile to React.createElement（Foo），并与JavaScript文件中定义或导入的组件相对应。

https://reactjs.org/docs/jsx-in-depth.html