导入多个 React 组件

Question

我是 React 的初学者，所以在这里寻找方向。

我创建了两个组件文件并试图将它们导入 App.js。但它没有产生预期的结果。仅显示一个带有导航栏和 header 详细信息的组件 (HeaderSection)。其他（eventOptions）组件有两个按钮，我想在导航栏下显示。没有显示。

如何将事件选项显示为 child 组件？它在我的其他项目之一中工作，但在这个项目中没有，即使我已经导入了所有文件。

import logo from './logo.svg'; 
import './App.css'; 
import HeaderSection from './component/HeaderSection'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 
import eventOptions from './component/eventOptions'; 
import { Component } from 'react';

class App extends Component{   render(){
    return(
      <div className="App">
        <HeaderSection />
        <eventOptions />

      </div>
    );

  } }

export default App;

///////////////////////// 更新代码：

事件选项组件：

import React, { Component } from 'react'

class eventOptions extends Component {

render() {
    
    const {event, flag} = this.props; 
    
    return (
        <div >
            {flag?(<h2>{event.EventName}</h2>): null}
         
        </div>
    )
} } export default eventOptions;

EventsState 组件：

import React, { Component } from 'react' import EventOptions from './EventOptions'

class EventsState extends Component { state={

    flag: false,
    title: "State Check",
    events : [
          {
              EventId: '1',
              EventName: 'New Year Party 2022',
              Venue: 'The Social',
              Time: '8:00 PM- 1:00AM'
          },
          {
            EventId: '2',
            EventName: 'StandUp Comedy',
            Venue: 'ShilpaRamam',
            Time: '8:00 PM- 1:00AM'
        },
        {
            EventId: '3',
            EventName: 'Live Music',
            Venue: '10 Downing Street',
            Time: '8:00 PM- 1:00AM'
        },
        {
            EventId: '4',
            EventName: 'Karakoe Night',
            Venue: 'The Rooftop lounge',
            Time: '8:00 PM- 1:00AM'
        }
    ]
}
   test = ()=>{console.log("clicked")};

render() {
  
    const {events} = this.state;
    return (
        
        <div class= "container">
              <button class="btn btn-primary btn-lg" >Add Event</button>
            <button class="btn btn-primary btn-lg" >Search Event</button>
            <button class="btn btn-primary btn-lg" onClick={()=>{this.setState= !this.state.flag}}>Show All

Events {events.map(event => )}

         </div>
    )
} }

export default EventsState;

Answer 1

您正在以较小的大小写渲染组件。

你需要这样做

import EventOptions from './component/eventOptions';

class App extends Component{   
  render(){
    return(
      <div className="App">
          <HeaderSection />
          <EventOptions />
        </div>
      );
  }
}

如果组件名称以小写字母开头，它将被视为内置元素，如 <div> 或 <span> 。这是因为 JSX 的工作方式。在 JSX 中，渲染以小写字母开头的组件会编译为 React.createElement('component')，相当于 HTML 元素

更新：

// Please return from your map callback
{events.map(currentEvent => {
  return (
    <h1>{currentEvent.EventName}</h1>
  );
}

// Or you can do this for short
{events.map(currentEvent => (<h1>{currentEvent.EventName}</h1>)}

Answer 2

import React, { Component } from 'react'

class EventsState extends Component {

state={
    flag : false, 
    title: "State Check",
    events : [
          {
              EventId: '1',
              EventName: 'New Year Party 2022',
              Venue: 'The Social',
              Time: '8:00 PM- 1:00AM'
          },
          {
            EventId: '2',
            EventName: 'StandUp Comedy',
            Venue: 'ShilpaRamam',
            Time: '8:00 PM- 1:00AM'
        },
        {
            EventId: '3',
            EventName: 'Live Music',
            Venue: '10 Downing Street',
            Time: '8:00 PM- 1:00AM'
        },
        {
            EventId: '4',
            EventName: 'Karakoe Night',
            Venue: 'The Rooftop lounge',
            Time: '8:00 PM- 1:00AM'
        }
    ]
}
    clickMe= () =>{
        this.setState({flag: !this.state.flag});
        if(this.state.flag==true){
        console.log("Clicked me!");
      const {events} = this.state;
}
render() {
    const {events} = this.state;
   
    return (
        
        <div>
        <h2>
            {this.state.title}
        </h2>
        {events.map(currentEvent =>{
            <h1>{currentEvent.EventName}</h1>
        })}
            <button class="btn btn-primary btn-lg" >Add Event</button>
            <button class="btn btn-primary btn-lg" >Search Event</button>
            <button class="btn btn-primary btn-lg" onClick={this.ClickMe} >Show All Events</button>
             
             
        </div>
    )
} } export default EventsState;

导入多个 React 组件

Importing multiple React Components

components

reactjs