重複使用組分反應

我對組分反應的使用提出了一些問題。基本上我想在代碼的不同部分使用「標題」組件，但它總是具有不同的「狀態」。我不太瞭解關於這個問題的官方文檔，因爲我會繼承這個組件，只是爲了我想要的而改變「狀態」？我知道這個問題似乎很愚蠢，但我正在學習，而且React與我看到的所有東西都非常不同。重複使用組分反應

var Title = React.createClass({ 
 
    displayName: "Title", 
 
    getDefaultProps: function() { 
 
    return { 
 
     className: "" 
 
    } 
 
    }, 
 
    render: function() { 
 
    return <h1 className={this.props.className}>{this.state.content}</h1> 
 
    } 
 
});

來源

2016-03-23 brubdeds brindeds

看來你不應該使用狀態。組件應該像HTML一樣接受兒童的內容。 –

在這種情況下，您應該使用道具而不是狀態。道具由父母擁有，國家由組件本身擁有。既然你想在多個地方使用這個組件，那麼父母自然會決定標題的文本應該是什麼 - 因此道具就是你想要的。

React有一個特殊的道具children，它取值於裏面的任何東西組件的JSX標籤。

舉例來說，這裏是它使用你的標題一個模擬的色差分量多次：

var MyComponent = React.createClass({ 

    render: function() { 
    return (
     <div> 
     <Title className="foo">Hello</Title> 
     <Title className="bar">World</Title> 
     </div> 
    ); 
    } 

});

既然你現在通過文本組件爲children道具，你必須更新你標題組件呈現這樣的：

var Title = React.createClass({ 
    displayName: "Title", 
    getDefaultProps: function() { 
    return { 
     className: "" 
    } 
    }, 
    render: function() { 
    // NOTE: we are now using children prop 
    return <h1 className={this.props.className}>{this.props.children}</h1> 
    } 
});

的這一個附帶好處是，你可以建立更復雜的標題，包含多個孩子，都可以正常運行：

var MyOtherComponent = React.createClass({ 

    render: function() { 
    return (
     <div> 
     <Title className="foo"> 
      <span>Hello</span> 
      <a href="bar.html">World</a> 
     </Title> 
     </div> 
    ); 
    } 

});

來源

2016-03-23 13:45:56 WickyNilliams

如果我想在未來操縱那些孩子，我可以嗎？例如，將文本1切換到文本2？ –

@brubdedsbrindeds然後你的父組件應該包含處理它的邏輯。例如'var text = someCondition？「Text 1」：Text 2「; return {text};' – WickyNilliams

你可能想通過{this.props.children}更換{this.state.content}和使用您的組件是這樣的：

<Title className="myclass">my title</Title>

作爲一般規則，儘量避免可能在使用狀態下，啞組件更容易重用。

來源

2016-03-23 13:43:18

重複使用組分反應

回答

相關問題