可以嵌套的反應組件有不同的道具嗎？

Question

我是新來react.js和我剛開始讀一本書，展示嵌套組件並說明如何傳遞到子元素的屬性。這是一個例子。

var GreetingComponent = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
} 
}); 

var GenericComponent = React.createClass({ 
    render: function() { 
    return <GreetingComponent name={this.props.name} />; 
} 
}); 

React.render(<GenericComponent name="World" />, 
document.getElementById('container')); 

正如書上說，「從上GenericComponent頂級屬性開始，您可以通過使用this.props的子元素GreetingComponent通過這個屬性 。」這就是呈現「Hello World」的原因。

但是，如果我想，因爲參數的緣故，相同的結構，但我想每個部件有不同的道具超值，喜歡

var GreetingComponent = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.anotherName}</div>; 
} 
}); 

var GenericComponent = React.createClass({ 
    render: function() { 
    return <GreetingComponent name={this.props.name} />; 
} 
}); 

React.render(<GenericComponent name="World" anotherName="Earth"/> 
document.getElementById('container')); 

檢查它here。

這不是工作，並沒有什麼渲染。

怎樣纔可以有不同的道具值的兩個嵌套組件？請解釋並幫助我理解。

謝謝。

Answer 1

對於<GreetingComponent name={...} />上班，GreetingComponent必須有name財產。

由於GenericComponent呈現GreetingComponent，你必須通過名稱GenericComponent爲屬性，稱爲greetingName例如，以便將它傳遞給GreetingComponent爲name。

現在，你想GenericComponent有它自己的名字，所以你必須給它一個第二道具。

在這裏看到一個解決方案：https://jsfiddle.net/5kk90t0k/。