Question

我正在构建一个简单的 React Web 应用程序。在我的 App.js 中，我的主要组件接受 3 个道具。（SearchCountry、SearchedCountry 和 Datas）：

import React, { Component } from 'react';
import './App.css';
import NavBar from '../Components/NavBar';
import SideBar from '../Components/SideBar';
import CountryList from '../Components/CountryList';
import Scroll from '../Components/Scroll';
import Main from '../Components/Main';
import SearchCountry from '../Components/SearchCountry';
import SearchedCountry from '../Components/SearchedCountry';
import Datas from '../Components/Datas';

class App extends Component {

  constructor() {
    super();
    this.state = {
      nations: [],
      searchField: '',
      button: false
    }
  }

  onSearchChange = (event) => {
    this.setState({searchField: event.target.value})
  }

  onClickChange = () => {
    this.setState(prevsState => ({
      button: true
    }));
  }

  render() {

    const {nations, searchField, button} = this.state;

    const searchedNation = nations.filter(nation => {
      if(button) {
        return nation.name.toLowerCase().includes(searchField.toLowerCase())
      }
    });

    return (
      <div>
        <div>
          <NavBar/>
        </div>
          <Main>
            <SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/>
            <SearchedCountry nations={searchedNation}/>
            <Datas/>
          </Main>
          <SideBar>
            <Scroll className='scroll'>
              <CountryList nations={nations}/>
            </Scroll>
          </SideBar>
      </div>
    );
  }

  componentDidMount() {
     fetch('https://restcountries.eu/rest/v2/all')
    .then(response => response.json())
    .then(x => this.setState({nations: x}));
  }

  componentDidUpdate() {
    this.state.button = false;
  }

}

export default App;

这是我的 Main.js 文件：

import React from 'react';

const Main = (prop1, prop2, prop3) => {
    return(
        <div role='main' className='dib' style={{width: 'auto'}}>
            <main>
                <div className='container' style={{margin: '10px', border: '2px solid black'}}>
                    <div>
                        {prop1.children}
                    </div>
                    <div>
                        {prop2.children}
                    </div>
                    <div>
                        {prop3.children}
                    </div>
                </div>
            </main>
        </div>
    );
}

export default Main;

这就是 Datas.js：

import React from 'react';

const Datas = () => {
    return(
        <div>
            <h3>Hello world</h3>
        </div>
    );
}

export default Datas;

我不明白为什么会出现此错误，因为 Data.js 文件中包含一些内容并且所有内容都已声明。在此先感谢任何给我答案的人。

Answer 1

因此在 Main.js 上，当您使用这种语法（功能组件）时，您获取 props 的方式是不正确的，不仅如此，每个组件只能有一个子组件。

首先，您可以通过多种不同的方式纠正这部分，您可以使用解构或仅使用一个参数

const Main = (prop1, prop2, prop3) => { ... }

选项 1

const Main = ({ prop1, prop2, prop3, children }) => { ... }

选项 2

const Main = (props) => { 
  console.log(props.props1)
  console.log(props.props2)
  console.log(props.children)
  ...
}

但就您而言，在 App.js 组件内的 Main 所有组件/标签上，它们都是一个子项，因此您应该做的不是您在做什么

// Main.js
...
<div className='container' style={{margin: '10px', border: '2px solid black'}}>
    {props.children}
    // OR if you are using destructuring
    {children}
</div>

这样你就可以在 <Main> ... </Main> 中获取所有内容，然后在 <div className="container ...> 中呈现

类型错误：无法读取未定义的属性“子级”

1 个答案:

选项 1

选项 2