如何在React.js中將道具從一個類傳遞到另一個類

Question

我對React非常陌生。我正在通過創建一個非常簡單的九格框來練習，用戶可以通過使用下拉菜單選擇他們想要使用的顏色。唯一的問題是，我無法弄清楚如何將包含它的類（ColorPicker）的變量傳遞給包含網格的類（Box）。任何人都可以給我一些關於如何做到這一點的指針？

我仍然習慣於將道具傳遞給其他類。

這裏給CodePen鏈接：http://codepen.io/anfperez/pen/RorKge

這裏是我的代碼

//this displays the color selections for the boxes: red, green, and blue 
var ColorPicker = React.createClass({ 

handleChange: function(e) { 
    var newColor = e.target.value; 
    this.props.onChange(color); 

}, 

render: function() { 

return (
    <div> 
     <select id="pick-colors" onChange={this.handleChange}> 
      <option value="red"> 
       Red 
      </option> 

      <option value="green"> 
       Green 
      </option> 

      <option value="blue"> 
       Blue 
      </option> 

     </select> 

    </div> 
    ) 
} 
}); 

//contains the boxes that will eventually change color 
var Box = React.createClass({ 
getInitialState: function() { 
    return { 
     //boxes are initially white 
     color: 'white' 
    }; 
}, 

    changeColor: function(newColor) { 
     var newColor = this.state.color; 
     this.setState({ 
      color: newColor 
     }); 

    }, 

render: function() { 
    return (
    <div > 
    <div className='box' style={{background:this.state.color}} onClick={this.changeColor}> 
    </div> 
    </div> 
    ); 
} 
}); 

Answer 1

而是呈現到DOM 10倍，你應該呈現一個包裝每個人的一個主要組成部分。您可以重新使用其他組件內的組件並傳遞道具。

Answer 2

您必須使用包含這兩者的另一個組件，並將所選顏色作爲其狀態進行管理。當ColorPicker獲取新值時，容器的狀態更新，Box從容器狀態獲取它的顏色值。

ColorPicker從顏色值變化時應該從道具的回調中執行。

var ColorPicker = React.createClass({ 

render: function() { 

return (
    <div> 
     <select id="pick-colors" onChange={this.props.onChange}> 
      <option value="red"> 
       Red 
      </option> 

      <option value="green"> 
       Green 
      </option> 

      <option value="blue"> 
       Blue 
      </option> 

     </select> 

    </div> 
    ) 
} 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      selectedColor: '#FFFFFF' 
     }  
    }, 
    onColorPicked: function(e) { 
     this.setState({selectedColor: e.target.value }) 
    }, 
    render: function() { 
     return (
      <div> 
       <ColorPicker onChange={this.props.onColorPicked} /> 
       <Box color={this.state.selectedColor} /> 
      </div> 
     ) 
    } 

}

唯一狀態組件應該是App。它通過道具傳遞給其他組件。

Answer 3

這是一種情況，您需要將狀態提升到包裝ColorPicker和Box類的父組件。然後，新的父組件將負責管理當前的顏色狀態，並處理對其的任何更改。 reactJS docs on lifting state將對您有所幫助。

Answer 4

React中的道具從父項傳遞給子項。例如，如果您有一個呈現子類的父類，則父類現在可以將道具傳遞給子類。這是一個例子。

class Parent extends React.Component { 
    render() { 
     return (
      <Child example="foo" /> 
     ) 
    } 
} 

class Child extends React.component { 
    render() { 
     return (
      <h1>{this.props.example}</h1> 
     ) 
    } 
} 

父類呈現子類。父類將一個道具傳遞給名爲example的子項。在孩子，你可以通過調用this.props.example

Answer 5

1. 你可以訪問孩子的價值你必須調用React。每個應用程序渲染一次，因爲每次調用意味着爲某個新應用程序創建的新虛擬DOM您必須瞭解虛擬DOM概念並在其渲染方法中實現頂級應用程序容器組件中的標記
2. 在純情況下，就像這個例子一樣，你必須通過應用程序組件狀態來連接所有的數據，這意味着ColorPicker組件的變化顏色將它存儲在應用程序狀態中，從中更新一個Box組件的道具通過改變值，但是如果你開發更復雜的應用程序，你必須組織數據存儲使用redux或通量概念，這也將是在同一頁上的幾個應用程序之間交換數據的正確方式

所以，here正確的代碼，它實現你的樣品

Answer 6

你可以做不用翻譯框多次或使用@ gesuwall的建議以上的這樣的事情

var ColorPicker = React.createClass({ 
getInitialState: function() { 
    return {color: 'white'} 
}, 
handleChange: function(e) { 
    var newColor = e.target.value; 
    this.setState({color: newColor}) 
}, 

render: function() { 

    return (
    <div> 
    <select id="pick-colors" onChange={this.handleChange}> 
     <option value="red">Red</option> 
     <option value="green">Green</option> 
     <option value="blue">Blue</option> 
    </select> 
    <Box color={this.state.color} /> 
    <Box color={this.state.color} /> 
    <Box color={this.state.color} /> 
    </div> 
) 
} 
}); 

//contains the boxes that will eventually change color 
var Box = React.createClass({ 
render: function() { 
    return (
    <div > 
    <div className='box' style={{background:this.props.color}}> 
    </div> 
    </div> 
); 
} 
}); 

ReactDOM.render(<ColorPicker />, document.getElementById('pick_color')); 

。我認爲他的方式是更有效的方法。