zoukankan      html  css  js  c++  java
  • React-高级指引

    一、Fragments

    react的组件在返回多个元素时,必须要用一个元素包裹起来,否则会报错,但是比如在表格中返回的列里加入了一个div如下:

    则会导致html无效,所以react支持使用React.Fragment将多个元素包裹起来,这样并不会在html中添加任何元素。

    在不需要key或其他属性时,还可以用一种更简洁的语法来实现:

    class Columns extends React.Component {
      render() {
        return (
          <>
            <td>Hello</td>
            <td>World</td>
          </>
        );
      }
    }

    二、Label标签

    在react中,Label标签的for被写作htmlFor,用来寻找id为xxx的表单:

    <label htmlFor="namedInput">Name:</label>
    <input id="namedInput" type="text" name="name"/>

    三、如何找到各个DOM节点?

    react可以通过给标签添加ref来操作各个标签,并且可以被传递到子组件中:

    class CustomTextInput extends React.Component {
      constructor(props) {
        super(props);
        // 创造一个 textInput DOM 元素的 ref
        this.textInput = React.createRef();
      }
      render() {
      // 使用 `ref` 回调函数以在实例的一个变量中存储文本输入 DOM 元素
      //(比如,this.textInput)。
        return (
          <input
            type="text"
            ref={this.textInput}
          />
        );
      }
    }
    // 通过ref找到这个标签
    focus() {
      // 使用原始的 DOM API 显式地聚焦在 text input 上
      // 注意:我们通过访问 “current” 来获得 DOM 节点
      this.textInput.current.focus();
    }

    四、JSX

    JSX实际上只是React.createElement(comonent, props, ...children)的语法汤,自定义的组件必须大写字母开头,因为小写字母开头的组件会被自动渲染成html标签,而大写字母开头的才会自动变成React.createElement(...)。

    React元素类型不能是一个表达式,如果需要动态获取需要渲染的组件,可以通过一个大写字母开头的变量来获取:

    const components = {
      photo: PhotoStory,
      video: VideoStory
    };
    
    function Story(props) {
      // 正确!JSX 类型可以是大写字母开头的变量。
      const SpecificStory = components[props.storyType];
      return <SpecificStory story={props.story} />;
    }

    五、可以使用高阶组件控制功能开关

    // featureToggle.js
    const isFeatureOn = function (featureName) {
      // return true or false
    };
    
    import { isFeatureOn } from './featureToggle';
    
    const toggleOn = (featureName, ComposedComponent) => class HOC extends Component {
      render() {
        return isFeatureOn(featureName) ? <ComposedComponent {...this.props} /> : null;
      }
    };
    
    // 用法
    import AdsComponent from './Ads'
    const Ads = toggleOn('ads', AdsComponent);

    六、父组件可以给子组件传递children

    const SampleComponent = () => {
      <Parent>
        <Child />
      </Parent>
    };
    
    const Parent = () => {
      // 你能使用class 'bla'或者其他的class来给子组件加上不同的样式.
      <div className="bla">
        {this.props.children}
      </div>
    };

    包裹组件同样可以通过接收一个tag名来生成对应的HTML标签. 但是一般情况下我们不推荐这么做, 因为这样做的话你就不能添加属性或者传入props了.

    const SampleComponent = () => {
      <Wrap tagName="div" content="Hello World" />
    };
    
    const Wrap = ({ tagName, content }) => {
      const Tag = `${tagName}`     // 变量名必须大写开头因为这是一个组件.
      return <Tag>{content}</Tag>
    }
  • 相关阅读:
    阅读<SQL语言艺术>实践五
    <SQL语言艺术>阅读计划
    文本类文件与VS关联实践
    接口开发原则
    逻辑部分开发原则
    <海量数据库解决方案>2011022301
    5800对于存储卡密码设置问题
    [转]Delphi用户登录窗口框架
    20世纪科学界最重要的12本书
    [转]UDP/TCP穿越NAT的P2P通信方法研究(UDP/TCP打洞 Hole Punching)
  • 原文地址:https://www.cnblogs.com/yinwenjie/p/12296838.html
Copyright © 2011-2022 走看看