@AveWycc

Почему не рендерится компонент?

App.js
import React from 'react'
import MainWindow from './components/MainWindow'
import Field from './components/Field'
import FieldName from "./components/FieldName";

function App() {
  return (
    <div className="App">
      <MainWindow>
        <Field data='Check' type='text'></Field>
        <FieldName data='Check'></FieldName>
      </MainWindow>
    </div>
  );
}

export default App;


MainWindow.js
import React from 'react'

export default class MainWindow extends React.Component {
  render() {
    return <div className="mainWindow">

    </div>
  }
}

Field.js
import React from 'react'

export default class Field extends React.Component {
  render() {
    return <input type={this.props.type} className="field">{this.props.data}</input>
  }
}

FieldName.js
import React from 'react'

export default class FieldName extends React.Component {
  render() {
    return <p className='fieldName'>{this.props.data}</p>
  }
}

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Не рендерятся компоненты FieldName и Field в MainWindow
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
0xD34F
@0xD34F
В MainWindow должно быть так:

<div className="mainWindow">
  {this.props.children}
</div>

Компонент Field - откуда вы взяли, что внутрь input можно что-то помещать? Это непарный тэг. Закрывающий тэг вырезать, добавить слеш в конец открывающего. Что дальше - вам виднее, всё зависит от того, как вы предполагаете использовать props.data. Обернуть всё в label, или сделать data значением input'а.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы