Question

我想知道如何将其他道具传递给已定义的React组件，或者是否可以。或者

。

例如，给定，

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

已定义foo，如上所述，我以后可以通过编程方式将foo的道具列表扩展为包含 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

将其他道具传递给反应组件

2 个答案: