如何通过JSX呈现不确定的复选框？

这是我尝试过的：

function ICB({what}) {
  return <input type="checkbox"
                checked={what === "checked"} 
                indeterminate={what === "indeterminate"} />;
}

但是，indeterminate不是属性HTMLElement，而是 属性 。如何从React / JSX设置属性？

解决方案 ：

由于以下大多数答案都使用findDOMNode或stringrefs，而这两个在React中都不再被视为良好实践，因此我编写了一个更现代的实现：

function ICB() {

  const [state, setState] = React.useState(0);

  const indetSetter = React.useCallback(el => {

    if (el && state === 2) {

      el.indeterminate = true;

    }

  }, [state]);

  const advance = () => setState(prev => (prev + 1) % 3);



  return <input type="checkbox"

                checked={state === 1}

                ref={indetSetter}

                onClick={advance} />;

}



ReactDOM.render(<ICB />, document.getElementById("out"));


<div id="out"></div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>