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>
}