antd自定义相关的思考

[ZhengXingchi]

Model

model的宽度在style={{width:700px!important'}}里面设置一直不生效。最后发现antd又暴露一个width属性，直接设置width='700px'即可

参考请问Ant design里如何设定对话框的宽度？

[ZhengXingchi]

关于父组件抓取子组件相关方法

1. forwarding refs 参考React16.3中的Refs和Forwarding Refs 虽然React中通过React.createRef()的方式来创建ref，但是并没有废除回调的方式来创建ref的方法。 主要有价值的部分是父组件获取被HOC包裹的子组件

   Child

   class Child extends React.Component{
   constructor(props){
   super(props);
   }
   render(){
   return <input />
   }
   }

Father

class Father extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <LogProps ref={this.myRef}/>
}
}

>logProps包裹

const logProps=logProps(Child);

>logProps

function logProps(Component) { class LogProps extends React.Component { componentDidUpdate(prevProps) { console.log('old props:', prevProps); console.log('new props:', this.props); }

render() {
  const {forwardedRef, ...rest} = this.props;

  // Assign the custom prop "forwardedRef" as a ref
  return <Component ref={forwardedRef} {...rest} />;
}

}

// Note the second param "ref" provided by React.forwardRef. // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" // And it can then be attached to the Component. return React.forwardRef((props, ref) => { return <LogProps {...props} forwardedRef={ref} />; }); }

[ZhengXingchi]

关于父组件抓取子组件相关方法(续)

其实一般情况下不应该获取ref，而应该从本质考虑为什么要获取ref。更普遍的方法是通过props传递。比如要获取内部子组件的state,则应该在子组件state改变的时候触发onChange从而改变父组件相关的值，参考antd的Upload组件如何获取上传的fileslist

[ZhengXingchi]

React 组件的默认状态（defaultProps）

基本类型组件：

class MyComponent extends React.Component {
    constructor(props){
        super(props);
        this.state={
            name:props.name
        };
    }
}

MyComponent.defaultProps={
    name:'default name'
};

功能型组件

const MyFunctionalComponent=(props)=>{
    return (
        <div>
            <p>{props.name}</p>
        </div>
    );
}

MyFunctionalComponent.defaultProps={
    name:'default name'
};

[ZhengXingchi]

关于父组件抓取子组件相关方法(续)

useImperativeHandle

参考react hooks官方指南useImperativeHandle useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef:

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

In this example, a parent component that renders would be able to call inputRef.current.focus().

React.forwardRef

参考react hooks官方指南React.forwardRef React.forwardRef creates a React component that forwards the ref attribute it receives to another component below in the tree. This technique is not very common but is particularly useful in two scenarios:

• Forwarding refs to DOM components
• Forwarding refs in higher-order-components React.forwardRef accepts a rendering function as an argument. React will call this function with props and ref as two arguments. This function should return a React node.

  
  const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
  {props.children}
  </button>
  ));

// You can now get a ref directly to the DOM button: const ref = React.createRef();

Click me!; ``` For more information, see [forwarding refs](https://reactjs.org/docs/forwarding-refs.html).

[ZhengXingchi]

关于dom中移除class的一些看法

jquery中有removeclass的api，可以去看看

而html的原生api现在有classList属性。具体用法是见下 document.getElementById("myDIV").classList.add("mystyle");其api非常多，值得一读HTML DOM classList 属性

[ZhengXingchi]

关于js的replace方法的一些看法

在本例中，我们将把 "Doe, John" 转换为 "John Doe" 的形式：

name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

[ZhengXingchi]

ReactDOM 相关的API

参考文献ReactDOM 相关的API

[ZhengXingchi]

关于父组件抓取子组件相关方法(续)

forwardRef透过connect传递给子组件 参考想要引用被react-redux库connect高阶组件包裹的WrappedComponent的ref的坑 forwardRef的用法是这样的：

class ParentComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {};

        this.ChildRef = React.createRef();
    }

    render () {
        return (
            <forwardRefChildComponent ref={this.ChildRef} />
        );
    }
}

class ChildComponent extends Component {
    render () {
        return <p>asd</p>;
    }
}

const forwardRefChildComponent = React.forwardRef((props, ref) => {
    return <ChildComponent ref={ref}>;
});

// 这样在父组件中定义的this.ChildRef就是ChildComponent实例