是否可以将不完整的jsx片段插入另一个jsx文件的渲染函数中？

Question

Say I have file Incomplete.jsx and Main.jsx

Incomplete.jsx looks as follows:

<Hey text="Hello World!" />
<Hey text="You made it to the end of the world!" />

Main.jsx looks as follows:

import React, { Component } from 'react';
import './App.css';
import playlist from './Incomplete';

class Hey extends Component {
  constructor(props) {
    super(props);
  }

  render() { 
    const {text} = this.props;

    return (
      <p>{text}</p>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>{playlist}</div>
    );
  }
}

export default App;

Then how can I make the program in such a way, that React will render

  render(){
    return (
      <div>
        <Hey text="Hello World!" />
        <Hey text="You made it to the end of the world!" />
      </div>
    ); 
  }

Instead of

render() {
    return (
      <div>{playlist}</div>
    );
  }

by importing Incomplete.jsx ?

Because right now the code doesn't work.

And is something like this even possible? I know that if I create Incomplete.jsx , then I will get a lot of errors. I see components as functions, so the idea is that Incomplete.jsx is a file with all the 'function calls' and the definition will be in Main.jsx .

One constraint that I have is that I don't want to do any imports in Incomplete.jsx .

It's for a project that teaches children how to use some simple pre-defined React Components by simply calling them in the Incomplete.jsx file.

Answer 1

Your incomplete.jsx should look something like this:

const Playlist = (props) => {
   return (
      <div>
        <Hey text="Hello World!" />
        <Hey text="You made it to the end of the world!" />
      </div>
   )
}

export default Playlist;

If you have your import in your main.jsx like this: import Playlist from './Incomplete'; You can call your code by using <Playlist /> in the render() .

Because your incomplete returns a component, and because we call it like that, you could add properties to it. Eg <Playlist amountOfNumbers={1} /> . Which you can retrieve from the props field in your Playlist

If the component you'd like to render inside your main.jsx is supposed to have it's own state . You can rewrite your Playlist to something like this:

export default class Playlist extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
         <Hey text="Hello World!" />
         <Hey text="You made it to the end of the world!" />
      </div>
    );
  }
}

The stateless (first) example, can be done without imports .