Question

我有一个问题..

请帮帮我。

我正在做反应js

如何将状态发送到条件反应组件？

this.state = {
 isTrue: false,
 name: undefined
}

handleClick(e){
 this.setState({
  isTrue: true,
  name: 'adwin'
 })
}

//////// render return ///////

{this.state.isTrue ? (
  <App2 name={this.state.name} />
 ) : ''
}



////// in App2 component //////
componentDidMount(){
 console.log(this.props.name)  //>>> it work undefined
}

Answer 1

将prop传递给子组件的方式是正确的。您可以尝试将props作为参数传递给子组件的构造函数，如

class App extends React.Component {
  constructor() {
    super();
    this.state = {
     isTrue: false,
     name: undefined
    }
   }
  

  handleClick = (e) => {
   this.setState({
    isTrue: true,
    name: 'adwin'
   })
  }
  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <App2 name={this.state.name} />
         ) : ''
        }
        <button onClick={this.handleClick}>Click</button>
      </div>
    )
  }
}
class App2 extends React.Component {
   constructor(props) {
    super(props);
   }
  componentDidMount(){
   console.log(this.props.name)  
  }
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }

}

ReactDOM.render(<App/>, document.getElementById('app'));

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

Answer 2

如果您只是在寻找条件，则可以{this.state.isTrue && <App2 name={this.state.name} />}

如何将状态发送到条件组件？

2 个答案: