reactjs - React 将 props 传递给子级，同时覆盖父级的父级 props

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>)
        }
    });

我希望父组件能够拦截 GrandParent 中设置的 props.parentClassName 并更改它，或者如果它不存在则创建它。

为了让按钮接收正确的parentClassName，我必须创建一个自定义按钮组件来仅从父组件接收 Prop ，如下所示

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

我认为我明白你想要做什么。我确信这不是您正在寻找的答案，但 React 并不是这样设计的。您可以(您确实不应该，但您可以)使用 Flux 容器并将父级的 className 保存在 Flux 存储中，并在上面显示的类中调用它。

我会重新考虑如何以 React 方式做到这一点，而不是使用 Flux 或尝试制作一个 hacky 解决方法。

根据我的经验，当渲染这样的自定义组件时:

return (
  <customComponent>
    <button />
  </customComponent>
);

包括 <button /> 总是对您更好作为这样的 Prop :

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

和渲染{this.props.buttonElement} customComponent 的渲染函数中您想要的位置类(class)。如果您不打算将按钮传递给 customComponent 的每个实例，您可以在 customComponent 的渲染函数中执行此操作:

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