Question

我正在学习ReactJS，如果问题很基本，我深表歉意。

我创建了一个组件：

import React, { Component } from 'react';

class title2 extends Component {
  constructor(props){
    super(props);
  }
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </div>
        );
      }
  }
export default title2;

我要从主组件（应用程序）呈现组件“ title2”：

import React, { Component } from 'react';
import './App.css';
import title2 from './title2';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { name2: 'world', };
  }

  render() {
    return (
      <div className="App">            
        Hello {this.state.name2}

        {title2}
       
      </div>
    );
  }
}
export default App;

这在浏览器中显示“ Hello world”，但是，它不会从“ title2”组件中输出任何内容，也不会导致错误。我该怎么解决？

Answer 1

您应使用大写字母T导入它：

import Title2 from './title2';

然后将其用作组件：

render() {
  return (
    <div className="App">            
      Hello {this.state.name2}

      <Title2 name="whatever name" />

    </div>
  );
}

Answer 2

反应组件应在UpperCamelCase中命名。因此，将class title2 extends Component更改为class Title2 extends Component。然后包括这样的组件：

render() {
  return (
    <div className="App">            
      Hello {this.state.name2}

      <Title2 />

    </div>
  );
}

问候

Answer 3

将title2更改为Title2。来自React官方文档：

当元素类型以小写字母开头时，它指的是诸如或的内置组件，并导致将字符串'div'或'span'传递给React.createElement。以大写字母开头的类型（例如，编译为React.createElement（Foo））并与您的JavaScript文件中定义或导入的组件相对应。

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在使用JSX之前将其分配给大写变量。

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

还可以将Title2放在花括号内，而不要放在花括号内：<Title2 />

大写的类型表示JSX标签引用了React组件。这些标记被编译成对命名变量的直接引用，因此，如果您使用JSX表达式，则Foo必须在范围内。

请参阅：https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type

ReactJS，如何在另一个组件的render方法中渲染一个组件？

3 个答案: