Реагировать на реквизиты для детей при перезаписи родительских реквизитов родителя

Question

Я собираюсь использовать пример для объяснения функциональности, которую я ищу.

const Grandparent = React.createClass({ 
    render: function(){ 
     return (<div> 
        <Parent> 
         <button className={this.props.parentClassName} /> 
        </Parent> 
       <div> 
        ) 
    } 
}); 

const Parent = React.createClass({ 
     render: function(){ 
      const childrenWithProps = React.Children.map(this.props.children, (child) => { 
       return React.cloneElement(child, {parentClassName: 'Murphy'}); 
      }); 
      return (<div> 
       {childrenWithProps} 
      </div>) 
     } 
    }); 

То, что я хотел бы для компонента Parent, чтобы перехватить props.parentClassName установить в GrandParent и изменить его или создать его, если он не существует.

Симметричных для кнопки, чтобы получить правильный parentClassName я должен создать пользовательские кнопки компоненты для получения реквизита только из компонента Parent, как и

React.createClass({ 
    render: function(){ 
     return (<button className={this.props.parentClassName} />) 
    } 
}); 

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

Так что я хотел бы это

React.createClass({ 
     render: function(){ 
      return (<div> 
         <Parent> 
          <button className={ 
//From Parent Component and not the GrandParent Component 
this.props.parentClassName 

} /> 
         </Parent> 
        <div> 
         ) 
     } 
    }); 

вместо этого

React.createClass({ 
     render: function(){ 
      return (<div> 
         <Parent> 
          <Button /> 
         </Parent> 
        <div> 
         ) 
     } 
    }); 

const Button = React.createClass({ 
     render: function(){ 
      return (<button className={this.props.parentClassName} />) 
     } 
    }); 

Если props.parentClassName возвращается из <Parent> компонента, а не <GrandParent> компонента.

Answer 1

I думаю Я понимаю, что вы пытаетесь сделать. Я уверен, что это не тот ответ, который вы ищете, но React не был разработан таким образом. Вы могли бы (вы действительно не должны были бы, но могли бы) использовать контейнер потока и сохранить родительский классName в своем хранилище флюсов и вызвать его в классе, который вы показывали выше.

Я бы передумал, как это сделать, а не использовать Flux или попытаться сделать хакерское обходное решение.

По моему опыту, при визуализации пользовательского компонента, как это:

Вы всегда лучше, включая <button /> как опору, как это:

return (
    <customComponent buttonElement={<button />} /> 
); 

и рендеринга {this.props.buttonElement}, где вы хотите в функции рендеринга класса customComponent. Если вы не собираетесь передать кнопку к каждому экземпляру customComponent, вы могли бы сделать это в функции визуализации customComponent:

if(typeof(this.props.buttonElement) !== "undefined") { 
    var buttonElement = this.props.buttonElement; 
} 
else { 
    var buttonElement = ""; 
} 
render (
    {buttonElement} 
); 

Answer 2

То, что я хотел бы для компонент Родителя для перехвата реквизита. parentClassName, установленное в GrandParent, и измените его, или создайте его , если он не существует.

Компонент не может перехватывать реквизиты своего родителя, поскольку он не имеет доступа к его родительскому объекту, только его детям!

Я все еще не понимаю, чего вы хотите достичь ... Выполняет ли следующий код то, что вы хотите?

import _ from 'underscore'; 
import React from 'react'; 

class Grandparent extends React.Component 
{ 
    render() { 
     return (
      <div {... this.props}> 
       <Parent> 
        <span>hello</span> 
        <span>welcome</span> 
        <span className="red">red</span> 
       </Parent> 
      </div> 
     ); 
    } 
} 

// Parent component will add ``className="border"`` to each its 
// child without ``className`` property. 
class Parent extends React.Component 
{ 
    render() { 
     return (
      <div {... this.props}> 
       {_.map(this.props.children, (v, k) => 
        React.cloneElement(v, {className: v.props.className || 'border', key: k}))} 
      </div> 
     ); 
    } 
}