【问题标题】:Can I set the children props in a react component from its parent?我可以在其父级的反应组件中设置子级道具吗?
【发布时间】:2015-09-21 16:09:43
【问题描述】:

是否有可能做出这样的反应:

var App = React.createClass({
    getInitialState: function(){
        return {
            children: [<div/>, <div/>],
            comp: ''
        };
    },
    componentWillMount: function(){
        this.setState({
            comp: <SomeComponent children={this.state.children}/>
        });
    },
    render: function(){
        return (
            <div>
                {this.state.comp === '' ? this.state.children : this.state.comp}
            </div>
        );
    }
});

当我尝试做类似的事情时,我得到:Uncaught TypeError: Cannot read property '_currentElement' of null 所以我认为答案是否定的,但我认为必须有某种方式考虑

<SomeComponent>
    <div/>
</SomeComponet>

其中&lt;SomeCompent/&gt; 呈现&lt;div/&gt;,是有效的。但是在这种特殊情况下,我会遇到同样的错误,但是如果您查看类似 React-Bootstrap https://react-bootstrap.github.io/ 之类的东西,它必须是可能的。

【问题讨论】:

  • 这是个好主意,如果不是因为这根本不是我要问的,我不想将状态传递给孩子,我想动态传递子元素到父级,在父级的父级中。但是,我知道您可以在setState() 中编写JSXJSX 不是 html,是一个对象,因此它可以被视为任何其他类型的数据。
  • 是的,你可以,带有html标签的东西你需要将它们转换成字符串然后你才能将它作为变量传递给状态,也许你可以使用eval或iso将html渲染成父元素@ 987654322@。但我相信你试图重新发明轮子
  • 嗯嗯嗯没有。我认为您不了解 JSX 是什么以及它是如何工作的。这不是 html。在您发表此类评论之前,请先进行一些研究:facebook.github.io/jsx
  • 我已经写了 react/flux(alt-reflux) 应用程序,可能我不明白你的问题,但我认为这是不可能的,如果这是你首先要问的。但是,既然您对这种可能性如此坚定,为什么不在您的网站上提供概念证明。
  • 你之前可能已经写过 react 应用,但是你可以在没有 jsx 的情况下编写 react 应用。但正如我所说,Jsx 被视为一个对象,例如您可以在react-bootstrap.github.io/components.html 中看到。如果您查看源代码,您可以将组件作为彼此的道具传递,也可以传递给函数,这可能会为某些 JSX 设置状态属性。

标签: javascript reactjs


【解决方案1】:

为什么要将 html 标签作为状态传递?我并不是说不好,但是对于您的要求,总会有更好的解决方案。假设一个子组件将状态布尔值 true 或 false 传递给父组件( Flux - 子组件的操作传递到存储,父组件可以通过 onChange 事件获取状态)。这样您就可以调用父元素来呈现不同的视图。

_onChange: function() {
    this.setState(this._getStateFromStores());
},

render: function() {
    var view;

    if (this.state.childAction) {
        view = <SomethingTrue/> ;
    }
    if (!this.state.childAction) {
        view = <SomethingFalse/> ;
    }

    return (
        <div>
            {view}
        </div>
);

【讨论】:

  • 这与我的要求无关。我要求能够从目标组件的父级修改此facebook.github.io/react/tips/children-props-type.html。所以父组件的父组件设置子组件。我将其设置为状态的事实是因为目标的子级是基于父级父组件的状态。
  • 基本上,我可以有条件地拥有一个组件,当它不存在时仍然具有与父元素相同的子元素(如在 === a 中,而不是 == a 中)现在。
猜你喜欢
  • 2020-05-07
  • 1970-01-01
  • 1970-01-01
  • 2018-05-29
  • 1970-01-01
  • 2018-06-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多