Props & States - ly-yuan-kai/Demo GitHub Wiki

Props

Props 是 React 父子元件間溝通的橋樑。 父元件用屬性賦值的方式傳給子元件，子元件用 this.props 讀取。 父元件傳入的 props 改變將造成子元件重繪。 props是靜態不變的。

States

States 是元件內部狀態，可用 setState 改值。 與一般變數不同的是，它無法直接修改（初始化例外），只能用 this.setState() 修改。

for example: ...為省略程式碼

// Demo.js 父元件
class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      gender: '',
    };
    this.getName = this.getName.bind(this);
    this.getGender = this.getGender.bind(this);
    ...
  };

  getName(e) {
    this.setState({name: e.target.value});
  }

  getGender(e) {
    this.setState({gender: e.target.value});
  }

  ...

  render() {
    return(
      <div>
        <Form
          getName={this.getName}
          getGender={this.getGender}
          name={this.state.name}
          gender={this.state.gender}
        />
        ...
      </div>
    )
  }
}

在Demo中，傳入4個props給Form，所以在Form component中就可以使用這4個props，使用方式為this.props.valueName。

// Form.js 子元件
class Form extends Component {
  render() {
    return(
      <div>
        Name:
        <input
          type="text"
          value={this.props.name}
          onChange={this.props.getName} /><br/>
        <label>
          <input
            type="radio"
            value="male"
            checked={this.props.gender === "male"}
            onChange={this.props.getGender} />
            Male
        </label>
        <label>
          <input
            type="radio"
            value="female"
            checked={this.props.gender === "female"}
            onChange={this.props.getGender} />
            Female
        </label>
      </div>
    )
  }
}
⚠️ **GitHub.com Fallback** ⚠️