将道具传递给子组件

Question

我似乎无法弄清楚如何将我的道具从App组件记录到子TotalBox组件中。 它一直作为一个空对象返回。 有谁知道如何成功做到这一点？

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      value: 0
    })
  }

  render() {

  return (
  <Wrapper>
    <Grid>
      <Row>
        <CostBox/>
        <Input/>
        <TotalBox {...this.props}/>
      </Row>
    </Grid>
  </Wrapper>
)
  }
}

totalBox.js 。

class TotalBox extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // Object {}
    this.state = {
      value: this.props.value
    }
  }

  render() {
    return (
      <Col md={3}>
        <RightBox>
          <TotalCostHeader>TOTAL COST</TotalCostHeader>
          <TotalCostLabel>{this.state.value}</TotalCostLabel>
        </RightBox>
      </Col>
    )
  }
}

Answer 1

您实际上是打算通过this.props ，还是要通过this.state ？ 从代码看来，您似乎想传递this.state ，它具有value属性并使用传递的value属性。 您还缺少App组件构造函数中this.state初始化：

this.state = {
  value: 0,
}

另外，请记住，在第一次渲染组件之前创建该构造函数时，只会调用一次。 以后对传递的props的更新将不会在constructor捕获。 如果要捕获以后的更新，则必须使用componentWillReceiveProps(nextProps)组件生命周期方法。

我还建议您不要使用{...this.props}语法，如果希望传递value属性，则应使用显式value={this.props.value} 。 {...this.props}看起来像是一个干净的解决方案，但它的可读性较差，因为它没有提供要传递给组件的确切上下文。 这种语法可能有用，但是这种情况很少见。 通常，它是一个通用的高阶组件，它将另一个组件封装起来，而您希望将props传递给封闭的组件。

Answer 2

@Jason，您需要从父母向孩子发送道具，如下所示：

 <TotalBox value={this.state.value}/>

Answer 3

如前所述，您做错的第一件事是在App组件中适当地将value作为props传递给TotalBox。 您确实有一个this.state.value ，它是在handler()函数中完成的。

乍一看，解决方案是简单地设置<TotalBox value={this.state.value}/>

但是，现在有了一个问题，因为尚未调用handler()函数（这是根据代码实际设置状态的唯一位置handler() ，所以尚未设置您的状态。

如果希望稍后再调用它，则需要在App组件this.state.value某种占位符值设置为this.state.value 。 可能看起来像这样：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
    this.state = {value: 0} // placeholder value set here
  }

  handler() {
    this.setState({
      value: 0
    })
  }

  render() {

  return (
  <Wrapper>
    <Grid>
      <Row>
        <CostBox/>
        <Input/>
        <TotalBox value={this.state.value}/>
      </Row>
    </Grid>
  </Wrapper>
)
  }
}

另外，如果未设置state或state.value，则无法渲染TotalBox组件。 所以在App组件中是这样的：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
    this.state = {} // don't forget to declare the state object itself
  }

  handler() {
    this.setState({
      value: 0
    })
  }

    render() {
        const totalBox = this.state.value ? <TotalBox value={this.state.value}/> : null
          return (
          <Wrapper>
            <Grid>
              <Row>
                <CostBox/>
                <Input/>
                {totalBox}
              </Row>
            </Grid>
          </Wrapper>
        )
          }
}

编辑：您提到要通过子组件更新父状态。 以下是使用handler函数执行此操作的代码：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      value: 0
    })
  }

  render() {

  return (
  <Wrapper>
    <Grid>
      <Row>
        <CostBox/>
        <Input/>
        <TotalBox value={this.state.value} handler={this.handler.bind(this)}/>
      </Row>
    </Grid>
  </Wrapper>
)
  }
}

class TotalBox extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // Object {}
    this.state = {
      value: this.props.value
    }
  }

 // Im using handler as a name for this function just as an example
 // this would be whatever you call as a function to update the state of
 // the parent component.
 handler () {
   // this is the function from your parent component
   // being executed to update its state
   this.props.handler()
 }  

  render() {
    return (
      <Col md={3}>
        <RightBox>
          <TotalCostHeader>TOTAL COST</TotalCostHeader>
          <TotalCostLabel>{this.state.value}</TotalCostLabel>
        </RightBox>
      </Col>
    )
  }
}