子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

组件交互中的 Props ​

父子组件一般通过 props 来传递数据

Props 和 State 的区别 ​

  1. Props 是从父组件传递到子组件的数据。Props 是不可变的，这意味着一旦它们被设置，就不能在子组件中更改。

  2. State 是组件的内部状态，它可以在组件的生命周期内改变。State 是可变的，可以在组件中通过 setState 方法来更新和修改数据。

案例: 1. 使用 Props 的示例 ​

javascript
// 案例: 1. 使用 Props 的示例
function HelloMessage(props) {
  return <h3>Hello {props.name}!</h3>;
}
ReactDOM.render(
  <HelloMessage name="ziChin" />,
  document.getElementById("app1")
);

案例: 2. 默认 Props 的示例 ​

javascript
// 案例: 2. 默认 Props 的示例
class HelloMessage extends React.Component {
  render() {
    return <h3>Hello {this.props.name}.</h3>;
  }
}
HelloMessage.defaultProps = {
  name: "ziChin",
};
ReactDOM.render(<HelloMessage />, document.getElementById("app2"));

案例: 3. State 和 Props 的组合使用示例 ​

javascript
// 案例: 3. State 和 Props 的组合使用示例
class WebSite extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "子卿全栈",
      site: "https://zichin.com",
    };
  }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}
class Name extends React.Component {
  render() {
    return <h3>{this.props.name}</h3>;
  }
}
class Link extends React.Component {
  render() {
    return (
      <h3>
        <a href={this.props.site}>{this.props.site}</a>
      </h3>
    );
  }
}
ReactDOM.render(<WebSite />, document.getElementById("app3"));

案例: 4. Props 验证示例 ​

javascript
// 案例: 4. Props 验证示例
var title = "子卿全栈";

class MyTitle extends React.Component {
  render() {
    return <h3>Hello, {this.props.title}.</h3>;
  }
}
MyTitle.propTypes = {
  title: PropTypes.string,
};
ReactDOM.render(<MyTitle title={title} />, document.getElementById("app4"));

如果你用的是 CDN 引入, 需要引入 React PropTypes 的 CDN 地址, 具体如下:

html
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>

代码与演示 ​

1. 全部代码 ​

点击查看代码
html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-jsx</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
  </head>

  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <div id="app4"></div>

    <script type="text/babel">
      (function () {
        // 案例: 1. 使用 Props 的示例
        function HelloMessage(props) {
          return <h3>Hello {props.name}!</h3>;
        }
        ReactDOM.render(
          <HelloMessage name="ziChin" />,
          document.getElementById("app1")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2. 默认 Props 的示例
        class HelloMessage extends React.Component {
          render() {
            return <h3>Hello {this.props.name}.</h3>;
          }
        }
        HelloMessage.defaultProps = {
          name: "ziChin",
        };
        ReactDOM.render(<HelloMessage />, document.getElementById("app2"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 3. State 和 Props 的组合使用示例
        class WebSite extends React.Component {
          constructor() {
            super();
            this.state = {
              name: "子卿全栈",
              site: "https://zichin.com",
            };
          }
          render() {
            return (
              <div>
                <Name name={this.state.name} />
                <Link site={this.state.site} />
              </div>
            );
          }
        }
        class Name extends React.Component {
          render() {
            return <h3>{this.props.name}</h3>;
          }
        }
        class Link extends React.Component {
          render() {
            return (
              <h3>
                <a href={this.props.site}>{this.props.site}</a>
              </h3>
            );
          }
        }
        ReactDOM.render(<WebSite />, document.getElementById("app3"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 4. Props 验证示例
        var title = "子卿全栈";
        class MyTitle extends React.Component {
          render() {
            return <h3>Hello, {this.props.title}.</h3>;
          }
        }
        MyTitle.propTypes = {
          title: PropTypes.string,
        };
        ReactDOM.render(
          <MyTitle title={title} />,
          document.getElementById("app4")
        );
      })();
    </script>
  </body>
</html>

2. 案例演示 ​




test-react-props.html 资源加载中...