將其他道具傳遞到反應組件

Question

我想知道如何將其他道具傳遞給已經定義的React組件，或者是否有可能。

例如，給定

const foo = (
  <Foo
    bar={bar}
  />
);

像上面定義了foo一樣，我以后可以通過編程方式擴展foo的prop列表以包括 baz嗎？ 即好像我做了以下開始？

const foo = (
  <Foo
    bar={bar}
    baz={baz}
  />
);

Answer 1

在這種情況下，您可以執行此操作，而不是傳遞值，而傳遞一些狀態對象，后者如果您想傳遞更多數據，只需更新狀態值，該值將自動傳遞給子組件。

data = {bar: bar};

const foo = (
  <Foo
    bar = {this.state.data}
  />
);

以后將數據更改為：

data = {bar: bar, a: a};

注意：如果要傳遞擁抱數據，請使用redux體系結構，不要將數據存儲在狀態變量中。

檢查以下示例：

 var Foo = (props) => { return( <div> {props.data.a} <br/> {props.data.b ? props.data.b : null} </div> ) } class App extends React.Component{ constructor(){ super(); this.state = { propsData: {a: 1} } this.click = this.click.bind(this); } click(){ let propsData = Object.assign({},this.state.propsData); propsData.b = 2; this.setState({propsData}); } render(){ return( <div> <Foo data={this.state.propsData}/> <p onClick={this.click} style={{marginTop: 100}}> Click me pass more data to child </p> </div> ) } } ReactDOM.render(<App/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/> 

Answer 2

您可以通過以下方式以編程方式進行操作

constructor() {
    super();
    this.state = {
         data: {bar: "bar"}
    }
}

然后使用傳播算子將其傳遞給您的組件

const foo = (
  <Foo
    {...this.state.data}
  />
);

稍后，如果您想添加另一個道具，您可以更新狀態data以擁有另一個屬性，例如

addData = () => {
    var data = {...this.state.data}
    data["baz"] = "baz"
    this.setState({data})
}

現在，由於您通過了道具...this.state.data

您可以在您的子組件（例如this.props.bar和this.props.baz訪問它們