Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » React

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
const el2 = React.cloneElement(element, {key: "k-2",id:_id+"_02", style: {left: 10, top: 150, position: 'absolute'}});

как в таком коде прописывать несколько стилей с разными id?
 
Добавлено:
мне нужен синтаксис

Всего записей: 1484 | Зарегистр. 25-02-2013 | Отправлено: 20:48 28-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
мне нужен синтаксис

console.log(element) и смотрите структуру объекта, тем самым понимаете как его менять

Всего записей: 6141 | Зарегистр. 20-09-2014 | Отправлено: 20:50 28-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
 
function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}
 

наверное что то вроде этого
https://reactjs.org/docs/dom-elements.html

Всего записей: 1484 | Зарегистр. 25-02-2013 | Отправлено: 20:56 28-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
наверное что то вроде этого

повторюсь

Цитата:
console.log(element) и смотрите структуру объекта, тем самым понимаете как его менять

это для ситуации с клонированием
ну и https://reactjs.org/docs/react-api.html#cloneelement

Цитата:
The resulting element will have the original element’s props with the new props merged in shallowly.  

то есть свойства можно изменить только у корневого объекта

Всего записей: 6141 | Зарегистр. 20-09-2014 | Отправлено: 20:59 28-03-2018 | Исправлено: Mavrikii, 21:04 28-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
<script type="text/babel">
//"use strict"
//import React from 'react';
//import ReactDOM from 'react-dom';
 
// https://www.youtube.com/watch?v=BwAakF_VUV8
 
const strongStyle = {
    fontFamily:'Arial'
}
 
function tick(_id) {  
  const element = (  
    <div key="k-1" id={_id} name="rrr">  
      <h1><strong style={strongStyle}>Hello</strong>, world!</h1>  
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
      <br />
    </div>  
  );  
   
  const el2 = React.cloneElement(element, {key: "k-2",id:_id+"_02", style: {left: 10, top: 150, position: 'absolute'}});  
   
  // highlight-next-line  
  ReactDOM.render([element, el2], document.getElementById('root'));    
}  
 
setInterval('tick("pp")', 1000);
 
function _color(){
    document.getElementById("pp").style.color = "#ff00ff";
    document.getElementById("pp_02").style.color = "#00ff00";
    //document.getElementById("pp_02").parentNode.removeChild(document.getElementById("pp_02"));
}
 
setTimeout(_color,4000);
 
</script>

а я уже такое замутил, главное проще делать стили с initial id, а потом всю динамику  
document.getElementById("

Всего записей: 1484 | Зарегистр. 25-02-2013 | Отправлено: 21:48 28-03-2018
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » React

Имя:
Пароль:
Сообщение

Для вставки имени, кликните на нем.

Опции сообщенияДобавить свою подпись
Подписаться на получение ответов по e-mail
Добавить тему в личные закладки
Разрешить смайлики?
Запретить коды


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2018

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru