How to use react - 10 common examples

expandPath
        .replace('$.', '')
        .split('.')
        .reduce((acc, path) => {
          const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : '';
          acc.push(last + path);
          return acc;
        }, []),
    );
  }, []);

  const data = React.useMemo(createMuiTheme, []);

  const allNodeIds = useNodeIdsLazy(data);
  React.useDebugValue(allNodeIds);
  React.useEffect(() => {
    if (checked) {
      // in case during the event handler allNodeIds wasn't computed yet
      setExpandPaths(allNodeIds);
    }
  }, [checked, allNodeIds]);

  return (
    <div>
       {
              setChecked(newChecked);
              setExpandPaths(newChecked ? allNodeIds : []);</div>

export const Version: React.FC = () => {
	const [isLoading, setIsLoading] = useState(true)
	const [latestVersion, setLatestVersion] = useState('')
	const { handleError } = useContext(ErrorContext)
	const { exit } = useApp()

	useEffect(() => {
		async function effect() {
			try {
				let options: latest.Options = {}

				// If the user is on a pre-release, check if there's a new pre-release.
				// Otherwise, only compare against stable versions.
				const prerelease = semver.prerelease(typewriterVersion)
				if (prerelease && prerelease.length > 0) {
					options = { version: 'next' }
				}

				const latestVersion = await latest('typewriter', options)
				setLatestVersion(latestVersion)
			} catch (error) {
				// If we can't access NPM, then ignore this version check.
				handleError(error)

var rest = omit(restProps, ['inputIcon']);
      var prefixCls = getPrefixCls('select', customizePrefixCls);
      var cls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-lg"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-sm"), size === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "-show-arrow"), showArrow), _classNames), className);
      var optionLabelProp = _this.props.optionLabelProp;

      if (_this.isCombobox()) {
        // children 带 dom 结构时，无法填入输入框
        optionLabelProp = optionLabelProp || 'value';
      }

      var modeConfig = {
        multiple: mode === 'multiple',
        tags: mode === 'tags',
        combobox: _this.isCombobox()
      };
      var finalRemoveIcon = removeIcon && (React.isValidElement(removeIcon) ? React.cloneElement(removeIcon, {
        className: classNames(removeIcon.props.className, "".concat(prefixCls, "-remove-icon"))
      }) : removeIcon) || React.createElement(Icon, {
        type: "close",
        className: "".concat(prefixCls, "-remove-icon")
      });
      var finalClearIcon = clearIcon && (React.isValidElement(clearIcon) ? React.cloneElement(clearIcon, {
        className: classNames(clearIcon.props.className, "".concat(prefixCls, "-clear-icon"))
      }) : clearIcon) || React.createElement(Icon, {
        type: "close-circle",
        theme: "filled",
        className: "".concat(prefixCls, "-clear-icon")
      });
      var finalMenuItemSelectedIcon = menuItemSelectedIcon && (React.isValidElement(menuItemSelectedIcon) ? React.cloneElement(menuItemSelectedIcon, {
        className: classNames(menuItemSelectedIcon.props.className, "".concat(prefixCls, "-selected-icon"))
      }) : menuItemSelectedIcon) || React.createElement(Icon, {
        type: "check",

(function (param) {
                                  var result = param[/* result */0];
                                  if (typeof result === "number") {
                                    return React.createElement("div", undefined, "Loading");
                                  } else if (result.tag) {
                                    var response = result[0];
                                    var isPlaying = Belt_Option.getWithDefault(Belt_Option.flatMap(Belt_Option.flatMap(response.spotify.me, (function (me) {
                                                    return me.player;
                                                  })), (function (player) {
                                                return player.isPlaying;
                                              })), false);
                                    var durationMs = Belt_Option.getWithDefault(Belt_Option.flatMap(Belt_Option.flatMap(Belt_Option.flatMap(response.spotify.me, (function (me) {
                                                        return me.player;
                                                      })), (function (player) {
                                                    return player.item;
                                                  })), (function (item) {
                                                return item.durationMs;
                                              })), 0);
                                    var progressMs = Belt_Option.getWithDefault(Belt_Option.flatMap(Belt_Option.flatMap(response.spotify.me, (function (me) {
                                                    return me.player;

function Search(props) {
  const [filters, setFilters] = useState([]);
  const [createFileterShow, setCreateFileterShow] = useState(false);
  const [currentFilterId, setCurrentFilterId] = useState(undefined);
  const [filter, setFilter] = useState({});
  const [loading, setLoading] = useState(false);
  const [barFilters, setBarFilters] = useState([]);
  const [filterName, setFilterName] = useState('');
  const [deleteFilterShow, setDeleteFilterShow] = useState(false);
  const [editFilterShow, setEditFilterShow] = useState(false);

  const column = [
    {
      title: '名称',
      dataIndex: 'name',
      // width: '20%',
      render: name => (
        <div style="{{">
          
            </div>

const useFetch = (dataUrl, commentUrl, logUrl, assigneeUrl, currentAssigneeUrl) => {
  const [dataArr, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchUser = async () => {
    const retArr = [];
    setLoading(true);
    const data = await axios.get(dataUrl);
    retArr.push(data);
    // const comment = await axios.get(commentUrl);
    retArr.push(await axios.get(commentUrl));
    retArr.push(await axios.get(logUrl));
    retArr.push(await axios.get(assigneeUrl));
    setData(retArr);
    setLoading(false);
  }; 

  const getEditOrDeleteCommentPermission = () => {
    const { currentMenuType: { id, organizationId } } = AppState;

const handlePanelResize = panelSize => dispatch(setPanelSize(panelSize));
    const handleSetPanelMinimized = minimized =>
        dispatch(setPanelMinimized(minimized));

    const [hoveredPredicate, setHoveredPredicate] = React.useState(null);

    // TODO: updating graphUpdateHack will force Graphcontainer > D3Graph
    // to re-render, and before render it will refresh nodes/edges dataset.
    // When GraphParser creates a new node or edge the d3 renderer needs to
    // be notified, because they share nodes/edges arrays.
    // But right now d3 renderer and graphParser live in different components.
    // There's no way to send this notification.
    // Most likely solution - make d3 force layout a part of graphParser,
    // that way graphParser will be able to control/update it.
    const [graphUpdateHack, setGraphUpdateHack] = React.useState("");

    const graphParser =
        frame.action === "query" &&
        getGraphParser(tabResult && tabResult.response);

    const forceReRender = () => {
        const graph = graphParser.getCurrentGraph();
        setGraphUpdateHack(
            `${Date.now()} ${graph.edges.length} ${graph.nodes.length}`,
        );
    };

    const onShowMoreNodes = () => {
        graphParser.processQueue();
        forceReRender();
    };

'use strict';
var React = require('react');


// Sentinel value to indicate no chromosome restriction
var ALL_CHROMOSOMES = null;

var PositionType = React.PropTypes.shape({
  start: React.PropTypes.oneOfType([
    React.PropTypes.number,
    React.PropTypes.instanceOf(null)
  ]),
  end: React.PropTypes.oneOfType([
    React.PropTypes.number,
    React.PropTypes.instanceOf(null)
  ]),
  chromosome: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.instanceOf(ALL_CHROMOSOMES)
  ])
}).isRequired;

module.exports = {
  PositionType,
  ALL_CHROMOSOMES
};

import isArray from 'lodash/isArray';
import deepEqual from 'deep-equal';
import locale from '../locale';
import MonthBody from './MonthBody';
import MonthTitle from './MonthTitle';
import formatter from '../formatter';
import util from '../util';

const prefixClass = Context.prefixClass;
const shadowArray = [1, 2]; // 只是用来提供一个长度的数组，本身的值没什么用
// const maxMonth = 5; // 最多渲染这么多个月

class Panel extends React.Component {

  static propTypes = {
    className: React.PropTypes.string,
    locale: React.PropTypes.string,
    height: React.PropTypes.number,
    value: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.array,
      React.PropTypes.object,
    ]),
    singleMode: React.PropTypes.bool, // 是否是单选模式
    onChange: React.PropTypes.func,
    showHalfDay: React.PropTypes.bool,
  };

  static defaultProps = {
    singleMode: true,
    onChange: () => {},

/* eslint-disable react/sort-comp */

const React = require("react");
const ReactDOM = require("react-dom");
const _ = require("underscore");
const TeX = require("react-components/tex.jsx");
const ApiClassNames = require("../perseus-api.jsx").ClassNames;
const ModifyTex = require("../tex-wrangler.js").modifyTex;

const MathOutput = React.createClass({
    propTypes: {
        value: React.PropTypes.oneOfType([
            React.PropTypes.string,
            React.PropTypes.number,
        ]),
        className: React.PropTypes.string,
        labelText: React.PropTypes.string,
        onFocus: React.PropTypes.func,
        onBlur: React.PropTypes.func,
    },

    getDefaultProps: function() {
        return {
            value: "",
            onFocus: function() {},
            onBlur: function() {},
        };
    },

    getInitialState: function() {
        return {
            focused: false,