# react代码片段

this.setState({
    businessLine: [{name: '-'},...res.data.data],
},()=>{
    // 这里可以立即使用
});

{this.state.businessLine ? (
    this.state.businessLine.map((item, i) => (
        <Option key={i.toString()} value={item.id}>{item.name}</Option>
    ))
) : (
    <Option key='1' value=''></Option>
)}

return (
  <span
    className={`custom-content ${show ? '' : 'hidden-custom'}`}
   >{item.name}</span>
)

/**
 * 拼接字符串，用于把符合条件的类样式名字拼接在一起
 * @param  {Object} obj     样式名字和是否符合条件
 * @return {String}         计算后的样式名字 字符串
*/
setClassNames = obj => {
  let str = '';
  // 如果是对象类型才处理
  if (Object.prototype.toString.call(obj) === '[object Object]') {
    Object.keys(obj).forEach(key => {
      if (obj[key]) {
        str += ` ${key}`; // str += ' ' + key;
      }
    });
    str = str.trim(); // 去除字符串两边的不可见字符
  }
  return str;
};
return (
  <span
    className={this.setClassNames({
      'active': this.state[e.key] === item.value,
      'forbidden': this.state.dimensional === e.value,
    })}
    >{item.name}</span>
)

let businessLine = [1, 2, 3];
{businessLine.length > 0 && businessLine.map((item, index) => (
  <Option key={index.toString()} value={item.code}>{item.name}</Option>
  <span key={index.toString()}> item </span>
))}

<div className="edit-item-content">
  {bussinessType.map( (item, index) => (
    <span
      key={index.toString()}
      onClick={(e) => {this.selectQuery(item, e)} }
      >{item.name}</span>
  ))}
</div>

// props数据更新前调用的生命周期
componentWillReceiveProps(nextProps) {
  const {showRangePicker} = this.props;
  const {selectDateBtn} = this.state;
  // 自定义时间组件显示与隐藏切换，主要是在读人次组件中用到
  if (nextProps.showRangePicker !== showRangePicker) {
    if (selectDateBtn === 0 && !nextProps.showRangePicker) {
      // 选择的是自定义时间组件，并且需要隐藏自定义时间组件，则时间组件选择月组件
      this.setState({selectDateBtn: DATATYPE.month});
      this.returnDateTypeRange(DATATYPE.month);
    }
    else {
      this.returnDateTypeRange(selectDateBtn);
    }
  }
}

handleAddPackageClick = (itemData) => {
  addPackage(itemData)
}
<span  onClick={() => { this.handleAddPackageClick(itemData) }} >
</span>

handleNewDataSouce = ttt => () => {
  console.log('ttt: ', ttt)
}
<Button
  type="primary"
  onClick={this.handleNewDataSouce('hello world')}
>
  新增数据源
</Button>

handleNewDataSouce = ttt => (e) => {
  console.log('ttt: ', ttt)
  console.log('dataset:', e.target.dataset)
}
<Button
  type="primary"
  onClick={this.handleNewDataSouce('hello world')}
  data-time="2020-02-03"
>
  新增数据源
</Button>

class Father extends PureComponent {
  componentDidMount(){
    this.child.setModelDisplay(true); // 调用子组件
	}
  onRef(ref){this.child = ref}

  render() {
    return (
      <div>
        <Child onRef={this.onRef} />
      </div>
    );
  }
}

class Child extends PureComponent {
  componentDidMount(){
    this.props.onRef(this);
  }
  setModelDisplay = (flag) => {
    this.show = flag;
  }
  render() {
    return (
      <div> 我是子组件 </div>
    );
  }
}

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

  const [dagRefFunc, setDagRefFunc] = useState(null)
  ...
  // 将子组件的方法存到state中
  const updateDagRefFun = useCallback(
    ref => {
      if (ref) {
        setDagRefFunc(ref())
      }
    },
    [setDagRefFunc],
  )
  ...
  <Child dagRef={updateDagRefFun}/>

function ({dagRef}) {
  ...
  // 方法暴露出去
  useEffect(() => {
    if (dagRef) {
      dagRef(() => {
        return {
          updateItem: (id, config) => { },
          updateAction: config => { },
        }
      })
      return () => dagRef(undefined)
    }
  }, [dagRef])
}

return (
  <div>
    <script src="http://..."></script>
    <script
      // 这里的console.log不会执行
      dangerouslySetInnerHTML={{
        __html: "console.log('我是测试')"
      }}
      />
    <script>
      {/* 这里的console.log不会执行 */}
      console.log('我是111');
    </script>
  </div>
)