javascript - javascript ReactJS,如何在组件方法的另一个呈现中呈现组件?

  显示原文与译文双语对照的内容
137 5

我在学习 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"组件输出任何内容,并且不会导致错误。我如何解决这个问题?

时间:原作者:0个回答

59 4

你应该用大写字母导入它:

import Title2 from './title2';

然后将它作为一个组件使用:

render() {
 return (
 <div className="App"> 
 Hello {this.state.name2}
 <Title2 name="whatever name"/>
 </div>
 );
}
原作者:
89 3

响应组件应在UpperCamelCase中命名。所以更改class title2 extends Componentclass title2 extends Component然后,包括这样的组件:

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

尊称

原作者:
65 0

请记住,组件应该像下面这样调用

更改

 <div className="App"> 
 Hello {this.state.name2}
 {title2}
 </div>

 <div className="App"> 
 Hello {this.state.name2}
 <title2/>
 </div>

同样记住,类名( 组件名称) 应该以大写开头

原作者:
91 4

title2 更改为 title2 。从正式的反应文档中:

当元素类型以 lowercase 字母开头时,它引用内置组件,如或者结果,结果字符串'div'或者'span'传递给 React.createElement 。从大写字母开始,比如编译到 React.createElement(Foo),对应于在JavaScript文件中定义或者导入的组件。

我们建议用大写字母命名组件。如果有一个以 lowercase 字母开头的组件,在使用JSX之前将它的分配给大写变量。

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

原作者:
...