Question

我刚刚开始学习react js。只是想知道这是在另一个组件内调用一个组件的好方法吗？

Answer 1

大多数React项目将从为您提供一个App.js组件开始，您可以在其中开始编写代码。在那里，您可以使用JSX syntax调用其他组件。像这样：

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  )
}

以下工作示例：

// Main application component
function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  )
}

// Header component
function Header() {
  return (
    <header>
      <h1>My first React App</h1>
    </header>
  )
}

// Main component
function Main() {
  return (
    <main>
      <p>Stuff and stuff go here..</p>
    </main>
  )
}

// Footer component
function Footer() {
  return (
    <footer>
      <p>Copyright 2020</p>
    </footer>
  )
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

注意：您可能还会看到类组件，而不是功能组件。他们看起来像这样：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      // some state goes here..
    }
  }

  render() {
    return (
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    )
  }
}

Answer 2

您通常希望使用JSX组成组件。在react文档上写得很好。 https://reactjs.org/docs/composition-vs-inheritance.html

const ComponentOne = () => <div>hi</div>

const ComponentTwo = () => <div>two</div>

const ComponentThree = () => (
  <>
    <ComponentOne />
    <ComponentTwo />
  </>
)

Answer 3

React具有两种类型的组件：基于函数和基于类。我将解释基于功能的组件。

示例：

import React, {Fragment} from 'react';

function ComponentB(){
    return (
      <p>Hello i'm component B</p>
    )
};//end;
function ComponentA(){
    return (
      <Fragment>
        <h1>hello i'm component A</h1>
        <ComponentB />
      </Fragment>
    )
};//end;
export default ComponentA;

Answer 4

如果您想学习或开始学习，我推荐此https://reactjs.org/docs/getting-started.html。如果您还有其他问题，请告诉我。

我可以在react组件中调用react组件吗

4 个答案: