React js 在组件内部调用组件

Question

我正在学习 React JS。我无法在 app.js 中调用卡组件内的国家/地区选择器组件。有人可以帮我吗？

这是我的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

你需要将 children 作为道具传递给 Cards，像这样：

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

React js 在组件内部调用组件

React js Calling Component inside component

javascript

components

reactjs