とくしゅか

6619 ワード
React テキストリンク
ある構成部品の「特別な状況」を考慮する必要がある場合があります.例えば、WelcomeDialogはDialogの特別なケースである.
Reactは合成によってこの問題を解決することもできる.より具体的な構成部品は、一般的な構成部品をレンダリングし、propsで内容を整理します.
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog      title="Welcome"      message="Thank you for visiting our spacecraft!" />  );
}
クラスとして定義された構成部品では、合成も同様に適用されます.
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login} onChange={this.handleChange} />        <button onClick={this.handleSignUp}>Sign Me Up!</button>      
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}
エレメントをエレメント内に配置し、propsにします.childrenでサブエレメントを合成する方法.
MySQL
ScrollViewでListViewをネストした場合の不完全なソリューション