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

时间:

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 。从正式的React文档中:

当元素类型以 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

...