javascript - this.setState 和 this.state.child 使用

Question

在下面的代码中，handleclick 函数中有一个 this.setState， radio 输入中有一个 this.state.child，两者的功能是什么，我的意思是 this.setState 和 this.state.child 因为它与整个代码相关

App.js

import React, { Component } from 'react';

import DefaultChild from './DefaultChild';
import OtherChild from './OtherChild';

class Apps extends Component {

  constructor(props) {
  super(props);
  this.state = {
  child : 'default'
  }
  }

  handleClick(e) {
  console.log(e.target.value);
  this.setState({
  child: e.target.value
  });
  }

  render() {

   return (
  <div style={{padding:'40px'}}>
    <input type="radio" checked={this.state.child==='default' ? true : false}  name="pickComponent" value="default" onChange={this.handleClick.bind(this)} />   Default
    <br />
    <input type="radio" checked={this.state.child==='other' ? true : false}   name="pickComponent" value="other" onChange={this.handleClick.bind(this)} /> Other
    <hr />
    {this.state.child==='default' ? <DefaultChild /> : false}
    {this.state.child==='other' ? <OtherChild /> : false}
  </div>
    );

  }
 }

export default Apps;

默认.js

 class DefaultChild extends Component {

  render() {

 return (
   <div>
    Default
  </div>
  );

  }
}

export default DefaultChild;

其他.js

class OtherChild extends Component {

 render() {

return (
  <div>
    Other
  </div>
 );

 }
}

export default OtherChild;

Answer 1

this.state.child是一个状态属性，用于控制是否显示“默认子项”或“其他子项”:

如果this.state.child是 "default" ，由于以下表达式而显示“默认子项”:

{this.state.child==='default' ? <DefaultChild /> : false}

该表达式解析为 <DefaultChild />如果this.state.child是 "default" ，或发送至false如果不。如果是<DefaultChild /> ，被渲染；如果是false ，该表达式不会呈现任何内容。

上面，this.state.child还决定了checked单选按钮的属性:

checked={this.state.child==='default' ? true : false}

如果this.state.child是 "other" ，做同样的事情，但是对于“另一个 child ”。

this.setState({child: e.target.value})设置状态以响应单击单选按钮，更改 child为单选按钮的值。这会触发组件的重新渲染，并显示选中的单选按钮并显示相应的子组件。

我建议通过 React documentation 进行操作更好地理解渲染、状态管理等。