Блог

Это мой index.js :

 import ReactDOM from 'react-dom';
import Tester from "./Tester.js"

ReactDOM.render(<Tester />, document.getElementById("root"))
 

Это мой Apps.js :

 import React from 'react';

function Apps(props) {
console.log(props.name)

    return( 
    <div>
        <h1>Hello, {props.name}</h1>
    </div>
    )
  }

export default Apps
 

Это мой idNum.js :

 import React from 'react';

function idNum(props) {
console.log(props.ids)

    return( 
        <h1>Hello, {props.ids}</h1>

    )
  }

export default idNum
 

Это мой Tester.js :

 import React from 'react';
import ReactDOM from 'react-dom';
import idNum from './idNum.js';
import Apps from './Apps.js';
import phoneNumber from './phoneNumber.js';

function Tester(props) {
    console.log(props.name)
    return (
        <div>
            <Apps name ="Hailey"/>
            <idNum id = "3" />
            <phoneNumber Integer ="88877738492"/>
      </div>
    )
  }
  
 
ReactDOM.render(
    <Tester
      name ={Apps}
      id ={idNum}
      number ={phoneNumber}
    />,
    document.getElementById('root')
  );

  export default Tester
    
 

Это мой phoneNumber.js :

 import React from 'react';

function phoneNumber(props) {
console.log(props.nums)

    return( 
    <div>
        <h1>Hello, {props.nums}</h1>
    </div>
    )
  }

export default phoneNumber
 

Спасибо! Я не уверен, почему <idNum id = "3" /> <phoneNumber Integer ="88877738492"/>
не будет выполняться, пока
<Apps/> может

Я сделал codesandbox с несколькими исправлениями:

• Имя компонентов и файлы в PascalCase
• Исправлено имя реквизита
• Единственная функция рендеринга в index.js

https://codesandbox.io/s/charming-wing-ucjsn