传递道具而不会渲染任何东西

首先，这样做有意义吗？其次，我会解释为什么我正在考虑这样做。传递道具而不会渲染任何东西

我有一个组件让我用户点击2个选项中的1个。无论是或不是。它们被添加到yesArray或noArray中。该组件被称为Decision。

一旦他们点击是或否，我渲染Thanks组件。我希望那些说yes的人的数组以及在这个感谢页面上显示为否的人的数组能够显示出来。

的问题是使阵列是在Decision但我希望它被上Thanks示出，但如果我通过一个支柱向下像这样从Decision组件的逻辑：

<Thanks 
    showYesArray={this.state.yesArray} 
/>

那么这将使得当它是由一个状态变化时触发<Decision />呈现，但在我父组件<Thanks />的<Thanks />组件才呈现，这可能是当<Decision />呈现

可以在不同的发布更多的代码，如果有必要，并解释更多

来源

2016-11-22 The worm

该状态应该位于同时包含Thanks和Decision Element的容器元素中。

render() { 
    return (
    <Decision 
     onYes={this.handleYes} 
     onNo={this.handleNo} 
    /> 

    <Thanks 
     active={this.state.thanksActive} 
     yesArray={this.state.yesArray} 
     noArray={this.state.noArray} 
    /> 
) 
}

来源

2016-11-22 14:58:43

然后我怎么会通过决定中的函数的数组？ –

该数组将处于容器的状态。 –

您在句柄函数中设置了setState。然后你在你的Thanks组件中渲染这个状态。 –

你可以使用shouldComponentUpdate（）并在不需要更新时返回false。但更多的代码可能会非常有助于查看你的意思。

来源

2016-11-22 14:52:06

您可以使用标志像state.decision，最初false，将其设置为true是点击/无时，和渲染只有当它的trueThanks组件。

{this.state.decision && <Thanks showYesArray={this.state.yesArray} />}

来源

2016-11-22 14:55:57

传递道具而不会渲染任何东西

回答

相关问题