Как передать несколько элементов в компонент React

Question

Он передает только первый элемент (element1) в функцию рендеринга, но остальные не работают?Я не очень понимаю, как это должно работать.

class ContactCard extends React.Component {

    render(){
        return <h1> Name: {this.props.name}  
        Mobile Phone: {this.props.num}  
        Work Phone: {this.props.work}</h1>
    }
}

const element1 = <ContactCard name="Mary" />;
const element2 = <ContactCard num="9176030350" />;
const element3 = <ContactCard work="2176012130" />;

ReactDOM.render(
    element1, 
     document.getElementById('root')
)

Answer 1

Чтобы передать несколько переменных, вам нужно передать все реквизиты как атрибуты.

В приведенном ниже примере вы можете увидеть <ContactCard name="Mary" num="9176030350" work="2176012130" />

import React from 'react';
import ReactDOM from 'react-dom';

class ContactCard extends React.Component {

    render(){
        return (<h1> Name: {this.props.name}  
        Mobile Phone: {this.props.num}  
        Work Phone: {this.props.work} </h1>)
    }
}
const element = <ContactCard name="Mary" num="9176030350" work="2176012130" />

ReactDOM.render( element , document.getElementById('root'));

Answer 2

Я добавил код и комментарии, чтобы помочь вам понять. Проблема в том, что вы создали 3 элемента с 1 подпоркой вместо 1 элемента с 3 подпорками.

element присваивается свойство name, но оно не предоставляется со свойствами num или work. В результате отображается только имя. Аналогичная проблема существует для element2 и element3. Мы можем решить эту проблему, предоставив одному элементу (element4) все свойства.

class ContactCard extends React.Component {

    render(){
        return <h1> Name: {this.props.name}  
        Mobile Phone: {this.props.num}  
        Work Phone: {this.props.work}</h1>
    }
}

// these all only receive one prop
const element1 = <ContactCard name="Mary" />;
const element2 = <ContactCard num="9176030350" />;
const element3 = <ContactCard work="2176012130" />;
// all three elements above can be removed and element4 will still work

// this will receive all three
const element4 = <ContactCard name="Mary" num="9176030350" work="2176012130" />;

ReactDOM.render(
    // render element4 because it has all the props
    element4, 
    document.getElementById('root')
)

Если вы хотите отобразить все созданные вами элементы, вам нужно создать родительский элемент, который содержит все из них, и передать родительский элемент в ReactDOM.render. Вот пример:

const parentWithChildren = (
  <div>
    <ContactCard name="Mary" num="9176030350" work="2176012130" />
    <ContactCard name="Mary" num="9176030350" work="2176012130" />
  <div>
)

ReactDom.render(
  parentWithChildren,
  document.getElementById('root')
)