React js在组件内调用组件

Question

我正在学习反应js。 我无法在 app.js 的卡片组件中调用 countrypicker 组件。 有人可以帮帮我吗？

这是我的cards.js

import React from 'react';
import './Cards.css';

 const Cards = () => {
    return(
        <div class="Cards">
            <p>Cards</p>
        </div>
    );
 }

 export default Cards;

这是我的 countrypicker.js

import React from 'react';
import './CountryPicker.css';

const CountryPicker = () => {
    return(
        <div class='CountryPicker'>
            <p>CountryPicker</p>
        </div>
    );
}

export default CountryPicker;

我从 App.js 调用这两个组件

import React,{ Component } from 'react';
import Cards from './components/Cards/Cards';
import Chart from './components/Chart/Chart';
import CountryPicker from './components/CountryPicker/CountryPicker';
import './App.css';

class App extends Component {
  render(){
    return (
      <div className='App'>
        <p className='p1' style={{color:'White'}}><b><u>Covid-19 tracker app</u></b></p>
        
        <div>
          <Cards>
            <div><CountryPicker title="India"/></div>
          </Cards> 
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

您需要将孩子作为道具传递给卡片，如下所示：

 const Cards = ({ children }) => {
    return(
        <div class="Cards">
            <p>Cards</p>
            {children}
        </div>
    );
 }