React基础：片段（fragments）、插槽、ref

片段

片段的作用是为了防止往DOM节点中插入一些不必要的标签

 class Ul extends React.Component {
     constructor(props) {
       super(props);
       this.state = {};
     }
     render() {
       return (
         <ul>
           <Li />
         </ul>
       );
     }
   }

   class Li extends React.Component {
     constructor(props) {
       super(props);
       this.state = {};
     }
     render() {
       return (
         <div>
           <li>床前明月光，疑是地上霜。</li>
           <li>举头望明月，低头思故乡。</li>
         </div>
       );
     }
   }
   ReactDOM.render(<Ul />, document.getElementById("example"));

运行结果：

我们想要的结果是ul中直接插入li标签，而不是li标签外还有一层div标签
要想解决这个问题，可以使用<React.Fragment></React.Fragment> 来替换div标签

render() {
    return (
      <React.Fragment>
        <li>床前明月光，疑是地上霜。</li>
        <li>举头望明月，低头思故乡。</li>
      </React.Fragment>
    );
  }

这样就不会有多余的div标签

插槽

vue与react插槽的区别

• vue的插槽需要在组件中定义slot标签，并且在引用的时候要对应slot标签上的插槽名。
• react的插槽直接将dom写到组件的标签下然后子组件通过this.props.children获取到放入的dom元素，这个dom元素可以设置key属性来区分每一个元素。然后在组件中直接将dom当成组件引入到render中。

  class Solt extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
        console.log(this.props.children);
        console.log(this.props.children[0].props);
        
      }
      render() {
        return <div></div>;
      }
    }

    ReactDOM.render(
      <Solt>
        <p flog="p1">段落1</p>
        <p flog="p2">段落2</p>
      </Solt>,
      document.getElementById("example")
    );

从图片中可以看出this.props.children是一个元素为对象的数组，每一个对象的props属性包好了我们需要的内容。根据这我们可以通过条件语句来确认每一个组件的位置

 class Solt extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
      console.log(this.props.children);
      console.log(this.props.children[0].props);
    }
    render() {
      return (
        <div>
          {/* 标题 */}
          <h1>{this.props.title}</h1>
          {/* 内容 */}
          <div>
            {Array.isArray(this.props.children)
              ? this.props.children.map(child => {
                  return this.renderChild(child);
                })
              : this.props.children &&
                this.renderChild(this.props.children)}
          </div>
        </div>
      );
    }
    /* 控制内容分发*/
    renderChild(child) {
      if (child.props.flog === "p") {
        return <div key="1">{child}</div>;
      } else {
        return <div key="2">{child}</div>;
      }
    }
  }

  ReactDOM.render(
    <Solt title="插槽">
      <p flog="p">段落1</p>
      <p flog="p2">段落2</p>
    </Solt>,
    document.getElementById("example")
  );

ref

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例.这样就可以确保在任何时间总是拿到正确的实例。

class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    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('example')
);