Question

我正在学习反应，发现如果不是从道具渲染的，则根据其父级的状态不能正确地重新渲染孩子。

this.children = props.children

return (
    <div>
        {this.children}
    </div>
);

https://codesandbox.io/s/yj7vmn571x

Answer 1

view

每次状态更改时，新道具都会传递到容器但是由于this.children不更新，因为构造函数在生命周期中仅被调用一次，而this.props.children则每次都更新。如果您想这样做，可以将其移入渲染器，尽管不建议这样做。 https://codesandbox.io/s/524qm53014

Answer 2

您不应该这样做，您想要向组件的子级添加额外的内容

使用

React.Children.map（children，function [（thisArg）]）

和

React.cloneElement（元件， [道具]， [...孩子] ）

class Wrapper extends React.Component {
  
  
  render() {
    
    const children = React.Children.map(this.props.children, (child) => {
       return React.cloneElement(child, {
         className : 'cool'
       });
    });
    return (
      <div>{children}</div>
    );
  }
  
}

function App (props) {
  return (
    <Wrapper>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </Wrapper>
  )
}

ReactDOM.render(<App/>, document.querySelector('.app-wrapper'))

.cool {
  background : tomato;
  color:white;
  padding : 5px;
  border-bottom: 1px solid;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div class="app-wrapper">
    
  </div>
</body>
</html>

当我使孩子不在道具中时，为什么反应状态绑定不起作用

2 个答案: