Передача компонента другому компоненту в реакции - PullRequest
Новая
       22

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

0 голосов
/ 24 мая 2018

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

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

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

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

Что я делаю

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

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

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

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

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

Now Here Вот пример кода: 

     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 «Account Name», который состоит из компонента аватара пользователя (который я создал как частьбиблиотеки) с именем MUserIcon, то же самое можно сказать и о MLink, который является компонентом гиперссылки.

1 Ответ

0 голосов
/ 24 мая 2018

В 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>
...