Ответы пользователя Andrew Ghostuhin по тегу «React»

Могу ли я часть сайта сверстать на html/css, а другую на React js?

Andrew Ghostuhin @Torin_Asakura

Lead Architect

Ты можешь оборачивать свой html код в реакт компоненты, а css импортируется также как обычно

Ответ написан более двух лет назад

Комментировать

Как по клику по кнопке передать DOM элемент в родительский компонент?

Andrew Ghostuhin @Torin_Asakura

Lead Architect

import { useRef } from "react";

const Item = ({ element, renderIn }) => {
  const node = useRef(null);

  const chooseThis = (event) => {
    renderIn.current.appendChild(node.current);
  };

  return (
    <li onClick={chooseThis}>
      <h1 ref={node}>{element}</h1>
    </li>
  );
};

const List = ({ elements, renderIn }) => (
  <ul>
    {elements.map((element) => (
      <Item element={element} renderIn={renderIn} />
    ))}
  </ul>
);

const App = () => {
  const elements = ["one", "two", "three"];
  const renderIn = useRef(null);

  return (
    <>
      <h1>
        Chosen one: <div style={{ color: "red" }} ref={renderIn}></div>
      </h1>
      <List elements={elements} renderIn={renderIn} />
    </>
  );
};
export default App;

elements - массив строк, элементы для отрисовки
renderIn - реф на ноду в которой будем отрисовывать выбранный элемент
List - ul который рендерит Item для каждого элемента из elements, принимает renderIn реф чтобы прокинуть его в Item
Item - li в котором создаётся h1 с содержимым элемента, внутри него инициализируется реф на h1, когда мы кликаем на li средствами DOM’а в ноду на которую указывает renderIn добавляется соответствующий h1 (для большей наглядности у блока в котором все рендерится в стилях color: ‘red’, он и применяется чилдренам)

Ответ написан более двух лет назад

1 комментарий

Как отследить положение элемента React?

Andrew Ghostuhin @Torin_Asakura

Lead Architect

красит все элементы списка красным

import { useRef, useEffect } from "react";

const Item = ({ element, pushNode }) => {
  const node = useRef(null);

  useEffect(() => {
    pushNode(node);
  }, [node]);

  return <li ref={node}>{element}</li>;
};

const List = ({ elements, pushNode }) => {
  return (
    <ul>
      {elements.map((element) => (
        <Item element={element} pushNode={pushNode} />
      ))}
    </ul>
  );
};

const App = () => {
  const elements = ["one", "two", "three"];
  const nodes = [];

  const pushNode = (node) => nodes.push(node);

  const paintRed = (event) => {
    nodes.forEach((node) => {
      node.current.style.color = "red";
    });
  };

  return (
    <>
      <List elements={elements} pushNode={pushNode} />
      <button onClick={paintRed}>Paint it red</button>
    </>
  );
};

export default App;

elements - просто массив из стрингов которые как бы элементы
nodes - (будущий) массив рефов
pushNode - колбек который пушит в массив реф, его основная суть в том чтобы чистоту кода сохранять и не срать в глобальный скоуп из компонента
List - обычный ul который мапит elements создавая Item на каждой итерации
Item - обычный li внутри которого находится текст элемента из elements

Внутри Item создается реф на li, после того как компонент маунтится (чтобы сам реф появился) вызывается колбек который пушит реф в nodes, потом по нажатию кнопки средствами DOM’а красятся li’шки

Ответ написан более двух лет назад

Комментировать

Как реализовать переключение компонентов по клику на элемент?

Andrew Ghostuhin @Torin_Asakura

Lead Architect

Нормальное решение - если оно решает твою задачу. Всякие бест-практики и прочие штуки уже для тех кто начинает ощущать нехватку знаний спустя год-другой.

Примерно так

const TopNavigation: FC = () => {
  const { opened, setOpened } = useData()
  const { state: cityState } = useCityState()
  const { dispatch } = useNavigationDispatch()
  const { state: navigationState } = useNavigationState()
  const navRef = useRef(null)

  useEffect(() => {
    dispatch({ type: 'setTopNavHeight', payload: { topNavHeight: navRef.current.offsetHeight } })
  }, [])

  return (
    <Navigation
      size='tiny'
      fixed
      dispatch={dispatch}
      transparent={navigationState.transparent}
      borderBottom='white'
      backgroundColor={navigationState.transparent ? 'transparent' : 'slightlyGray'}
    >
      <Layout justifyContent='center'>
        <Box
          maxWidth={['90%', '90%', '1200px']}
          width='100%'
          height='48px'
          ref={navRef}
          alignSelf='center'
          alignItems='center'
        >
          <CityPinIcon
            color={navigationState.transparent ? 'white' : ''}
            width='10px'
            height='13px'
          />
          <Layout flexBasis='8px' />
          <Text
            fontSize='small'
            lineHeight='normal'
            color={navigationState.transparent ? 'white' : 'dustyGray'}
            cursor='pointer'
            onClick={() => setOpened(true)}
          >
            {cityState.city.name}
          </Text>
          <Layout flexGrow={1} />
          <TopBarList />
        </Box>
      </Layout>
      <CityModal onClose={() => setOpened(false)} opened={opened} />
    </Navigation>
  )
}

export default TopNavigation

Войдите на сайт