`react.cloneElement` игнорирует className, как я могу дать что-то className?

0

Чтение через документы, кажется, что теперь устаревшие cloneWithProps объединили имя className s, но cloneElement игнорирует имя className которое прошло

https://jsfiddle.net/z12hc5er/1/

var Foo = function () {
    return <div className="shows-up">Hello World</div>;
};

var Bar = function () {
    return React.cloneElement(<Foo/>, {className: 'ignored'});
};

ReactDOM.render(
    <Bar/>,
    document.getElementById('container')
);

Есть ли способ влиять на className клонированного элемента?

Теги:

1 ответ

2
Лучший ответ

className - это атрибут определенного элемента в Foo, что, если у вас было несколько элементов с именами классов?

Второй параметр - для передачи реквизита. Реквизиты - это всего лишь способ передачи данных компоненту, реакция не предполагает, как вы хотите их использовать, поэтому вам нужно будет прямо сказать это, например:

var Foo = function (props) {
    return <div className={props.className || 'shows-up'}>Hello World</div>;
};

var Bar = function () {
    return React.cloneElement(<Foo/>, {className: 'not-ignored'});
};

ReactDOM.render(
    <Bar/>,
    document.getElementById('container')
);

Я думаю, они решили, что делать что-то особенное со style и className (и игнорировать key и ref) было слишком cloneWithProps в cloneWithProps.

Редактировать: смотрите здесь, похоже, что это было сделано по причинам оптимизации: https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html

Ещё вопросы

Сообщество Overcoder
Наверх
Меню