子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

React 组件 ​

React 组件是 React 应用的构建块，它们允许我们将 UI 划分为独立、可复用的代码片段。在 React 中，我们可以使用函数或类来定义组件。

组件分类 ​

1. 函数组件 ​

要使用自定义的组件，我们需要像 HTML 标签一样使用它。例如，我们可以创建一个名为 HelloMessage 的组件，并在页面上使用它：

javascript
// 案例: 1. 函数组件
function HelloMessage(props) {
  return <h3>Hello World!</h3>;
}
const element = <HelloMessage />;
ReactDOM.render(element, document.getElementById("app1"));

如果我们需要向组件传递参数，通常使用 props 作为函数变量。例如：

javascript
// 案例: 2. 函数组件参数
function HelloMessage(props) {
  return <h3>Hello {props.name}!</h3>;
}
ReactDOM.render(
  <HelloMessage name={"Hello World!"} />,
  document.getElementById("app3")
);

2. 类组件 ​

javascript
// 案例: 3. 类组件
class Welcome extends React.Component {
  render() {
    return <h3>Hello World!</h3>;
  }
}
ReactDOM.render(<Welcome />, document.getElementById("app3"));

如果我们需要向组件传递参数，可以使用 this.props 对象。例如：

js
// 案例: 4. 类组件参数
class HelloMessage extends React.Component {
  render() {
    return <h3>Hello {this.props.name}!</h3>;
  }
}
ReactDOM.render(
  <HelloMessage name={"Hello World!"} />,
  document.getElementById("app4")
);

在这个例子中，我们通过 props.name 获取了传递给组件的 name 属性。

3. 复合组件 ​

复合组件是将多个组件组合在一起以创建更复杂的 UI 的方法。例如，我们可以创建一个输出网站名称、网址和小名的组件：

javascript
// 案例: 5. 复合组件
function Name(props) {
  return <h3>网站名称：{props.name}</h3>;
}
function Url(props) {
  return (
    <h3>
      网站地址：
      <a href={props.url} target="_blank">
        {props.url}
      </a>
    </h3>
  );
}
function Nickname(props) {
  return <h3>网站小名：{props.nickname}</h3>;
}
function App() {
  return (
    <div>
      <Name name="子卿全栈" />
      <Url url="//zichin.com" />
      <Nickname nickname="zichin" />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("app5"));

在这个例子中，App 组件使用了 Name、Url 和 Nickname 组件来输出对应的信息。

代码与演示 ​

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>
  </head>

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

    <script type="text/babel">
      (function () {
        // 案例: 1. 类组件 - 字符串实现
        class MyComponent extends React.Component {
          handleClick() {
            this.refs.myInput.focus();
          }
          render() {
            // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
            return (
              <div>
                <input type="text" ref="myInput" />
                <input
                  type="button"
                  value="点我输入框获取焦点"
                  onClick={this.handleClick.bind(this)}
                />
              </div>
            );
          }
        }
        ReactDOM.render(<MyComponent />, document.getElementById("app1"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2. 类组件 - 回调实现
        class MyComponent extends React.Component {
          constructor(props) {
            super(props);
            this.inputRef = React.createRef();
          }
          handleClick() {
            this.inputRef.current.focus();
          }
          render() {
            return (
              <div>
                <input type="text" ref={this.inputRef} />
                <input
                  type="button"
                  value="点我输入框获取焦点"
                  onClick={this.handleClick.bind(this)}
                />
              </div>
            );
          }
        }
        ReactDOM.render(<MyComponent />, document.getElementById("app2"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 3. 函数组件 - useRef实现
        const MyComponent = function () {
          const inputRef = React.useRef(null);
          const handleClick = () => {
            inputRef.current.focus();
          };
          return (
            <div>
              <input type="text" ref={inputRef} />
              <input
                type="button"
                value="点我输入框获取焦点"
                onClick={handleClick}
              />
            </div>
          );
        };
        ReactDOM.render(<MyComponent />, document.getElementById("app3"));
      })();
    </script>
  </body>
</html>

2. 案例演示 ​




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