ReactJS, как визуализировать компонент в методе визуализации другого компонента?
Я изучаю 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» и не приводит к ошибке. Как я могу это решить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы должны импортировать его с большой буквы:
import Title2 from './title2';
А потом использовать как компонент:
render() {
return (
<div className = "App">
Hello {this.state.name2}
<Title2 name = "whatever name" />
</div>
);
}
Компоненты React должны быть названы в UpperCamelCase. Так что замените class title2 extends Component на class Title2 extends Component. Затем включите такой компонент:
render() {
return (
<div className = "App">
Hello {this.state.name2}
<Title2 />
</div>
);
}
приветствия
если это решило вашу проблему, отметьте это зеленой галочкой :)
Измените title2 на Title2. Из официальной документации React:
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
См .: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
Также поместите Title2 внутри тега вместо фигурных скобок: <Title2 />
Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.
См .: https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type
Простое использование <title2 /> не решило эту проблему. Это (название UpperCamelCase) решило эту проблему, спасибо. Я думал, что наименование было хорошей практикой, я не знал, что это необходимо / обязательно.