Передача компонента другому компоненту в реакции

Question

Я создаю небольшую библиотеку компонентов, и у меня есть компонент таблицы, и моя задача состоит в том, чтобы сделать его модульным и универсальным, чтобы его можно было изменить позже

Теперь таблица по своей природе является контейнерным компонентом, который может содержать различные другие небольшие компоненты, которые я создаю в библиотеке.

Что я хочу знать?

Является ли приведенный ниже подход правильным способом передачи компонента другому компоненту? если нет, то каков правильный или лучший способ сделать это?

Что я делаю

Таблица имеет много реквизита, но 3 основных реквизита:

colName который является массивом строк, передающих имя столбца таблицы каждого столбца

data это массив, который содержит массив для каждой строки.

dataComponent (остается неопределенным, если вы хотите отобразить данные как обычные текстовые данные), который является массивом компонента (тот, который я определил в библиотеке), который будет использоваться для определенного столбца для каждой строки

Слишком много разговоров о строке, столбце и коде

Теперь вот пример кода:

     const User = [
          <React.Fragment>
            <span className="userinfo">
              <MUserIcon user_name={"dummy1"} profile_type={"facebook"} />
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.facebook.com"}
                link_content={"dummy1"}
              />
            </span>
          </React.Fragment>,

          <React.Fragment>
            <span className="userinfo">
              <MUserIcon user_name={"dummy2"} profile_type={"instagram"} />
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.instagram.com"}
                link_content={"dummy2"}
              />
            </span>
          </React.Fragment>,

          <React.Fragment>
            <span className="userinfo">
              <MUserIcon
                user_name="imawebdev"
                profile_type="linkedin"
                user_img_src={pro_pic}
              />,
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.linkedin.com"}
                link_content={"imawebdev"}
              />
            </span>
          </React.Fragment>
        ];






return (
          <div className="App">
            <MTable
              title="Demo Table"
              colsName={["Account Name", "Queued", "Errors"]}
              data={[["imawebdev", 5, 0], ["dummy1", 4, 3], ["dummy2", 4, 0]]}
              dataComponent={[User]}
            />
          </div>
        );
      }

Приведенный выше код имеет dataComponent который передает компонент для colName "Имя учетной записи", которое состоит из компонента аватара пользователя (который я создал как часть библиотеки) и называется MUserIcon и то же самое можно сказать для MLink который является компонентом гиперссылки.

Answer 1

В React вы можете использовать дочерние компоненты. Вместо того чтобы использовать ваш dataComponent проп, вы можете структурировать это так:

<MTable /* props here */>
   {User}
</MTable>

А потом, в MTable, Вместо того, чтобы использовать props.dataComponent, ты можешь использовать props.children, который все еще даст вам ваш User все так же.

Вы также можете определить User как сам компонент, так что это выглядело бы более согласованно:

const user User = () => [ /* your array of fragments here */ ]

<MTable /* props here */>
   <User />
</MTable>