Reactjs 如何将一个简单的HTML页面拆分为多个React组件并共享状态？

我是新手。有人能解释一下如何将这个例子翻译成ReactJs吗？具体来说，如果您必须将代码组织为3个组件，您将如何在这些组件之间共享状态

<label for="inputNumberOfCheckboxes">Enter number of checkboxes:</label> <input type="text" id ="inputNumberOfCheckboxes">
<ol id="listOfCheckboxes">
</ol>
<p id="printNumberOfSelectedCheckboxes">None</p>

<script type="text/javascript">
    const inputNumberOfCheckboxes = document.getElementById('inputNumberOfCheckboxes');
    const listOfCheckboxes = document.getElementById('listOfCheckboxes');
    const printNumberOfSelectedCheckboxes = document.getElementById('printNumberOfSelectedCheckboxes');
    inputNumberOfCheckboxes.addEventListener('change', () => {
        const n = parseInt(inputNumberOfCheckboxes.value);
        listOfCheckboxes.innerHTML = '';
        for (let i = 0; i < n; i++) {
            listOfCheckboxes.innerHTML += `
    <li>
        <input type="checkbox">
    </li>`;
        }
        const refreshCount = () => {
            const count = listOfCheckboxes.querySelectorAll('input:checked').length;
            printNumberOfSelectedCheckboxes.innerHTML = `${count} checked`;
        };
        for (let checkbox of listOfCheckboxes.childNodes) {
            checkbox.addEventListener('change', refreshCount);
        }
    });
</script>

输入复选框的数量：
无
const InputNumberOfCheckBox=document.getElementById（'InputNumberOfCheckBox'）；
const listofcheckbox=document.getElementById（'listofcheckbox'）；
const printNumberOfSelectedCheckboxes=document.getElementById（'printNumberOfSelectedCheckboxes'）；
InputNumberOfCheckBox.addEventListener（'change'，（）=>{
const n=parseInt（inputnumberofcheckbox.value）；
ListofCheckBox.innerHTML=''；
for（设i=0；i
`；
}
常数刷新计数=（）=>{
const count=ListofCheckBox.querySelectorAll（'input:checked'）。长度；
PrintNumberOfSelectedCheckBox.innerHTML=`${count}选中`；
};
for（设ListofCheckBox.childNodes的复选框）{
复选框.addEventListener（'change'，refreshCount）；
}
});

在一个组件中：

export default function App() {
  const [inputValue, setInputValue] = React.useState("");
  const [checkedItems, setCheckedItems] = React.useState([]);

  const getRows = () => {
    const length = inputValue > 0 ? inputValue : 0;
    const arr = Array.from({ length }, (_, i) => i + 1);

  return (
    <ol>
      {arr.map((item) => (
        <li key={item}>
          <input
            onChange={() => {
              const items = checkedItems.includes(item)
                ? checkedItems.filter((num) => num !== item)
                : [...checkedItems, item];

              setCheckedItems(items);
            }}
            type="checkbox"
            checked={checkedItems.includes(item)}
          />
        </li>
      ))}
    </ol>
  );
}
  };

  return (
    <div className="App">
      <label htmlFor="inputNumberOfCheckboxes">
        Enter number of checkboxes:
      </label>
      <input
        name="inputNumberOfCheckboxes"
        type="number"
        onChange={(e) => setInputValue(e.target.value)}
        value={inputValue}
      />
      <ol>{getRows()}</ol>
      {inputValue > 0 ? null : <p>None</p>}
      checked items: {checkedItems.length}
    </div>
  );
}

List.js

export default function Input({ name, value, onChange }) {
  return (
    <div>
      <label htmlFor={name}>Enter number of checkboxes:</label>
      <input
        name={name}
        type="number"
        onChange={(e) => onChange(e.target.value)}
        value={value}
      />
    </div>
  );
}

export default function List({ inputValue, checkedItems, setCheckedItems }) {
  const length = inputValue > 0 ? inputValue : 0;
  const arr = Array.from({ length }, (_, i) => i + 1);

  return (
    <ol>
      {arr.map((item) => (
        <li key={item}>
          <input
            onChange={() => {
              const items = checkedItems.includes(item)
                ? checkedItems.filter((num) => num !== item)
                : [...checkedItems, item];
              setCheckedItems(items);
            }}
            type="checkbox"
            checked={checkedItems.includes(item)}
          />
        </li>
      ))}
    </ol>
  );
}

export default function Summary({ inputValue, checkedItems }) {
  return (
    <p>
      {inputValue > 0 ? null : <p>None</p>}
      checked items: {checkedItems.length}
    </p>
  );
}

export default function App() {
  const [inputValue, setInputValue] = React.useState("");
  const [checkedItems, setCheckedItems] = React.useState([]);

  return (
    <div className="App">
      <Input onChange={setInputValue} value={inputValue} />
      <List
        name="inputNumberOfCheckboxes"
        inputValue={inputValue}
        checkedItems={checkedItems}
        setCheckedItems={setCheckedItems}
      />
      <Summary inputValue={inputValue} checkedItems={checkedItems} />
    </div>
  );
}

App.js

export default function Input({ name, value, onChange }) {
  return (
    <div>
      <label htmlFor={name}>Enter number of checkboxes:</label>
      <input
        name={name}
        type="number"
        onChange={(e) => onChange(e.target.value)}
        value={value}
      />
    </div>
  );
}

export default function List({ inputValue, checkedItems, setCheckedItems }) {
  const length = inputValue > 0 ? inputValue : 0;
  const arr = Array.from({ length }, (_, i) => i + 1);

  return (
    <ol>
      {arr.map((item) => (
        <li key={item}>
          <input
            onChange={() => {
              const items = checkedItems.includes(item)
                ? checkedItems.filter((num) => num !== item)
                : [...checkedItems, item];
              setCheckedItems(items);
            }}
            type="checkbox"
            checked={checkedItems.includes(item)}
          />
        </li>
      ))}
    </ol>
  );
}

export default function Summary({ inputValue, checkedItems }) {
  return (
    <p>
      {inputValue > 0 ? null : <p>None</p>}
      checked items: {checkedItems.length}
    </p>
  );
}

export default function App() {
  const [inputValue, setInputValue] = React.useState("");
  const [checkedItems, setCheckedItems] = React.useState([]);

  return (
    <div className="App">
      <Input onChange={setInputValue} value={inputValue} />
      <List
        name="inputNumberOfCheckboxes"
        inputValue={inputValue}
        checkedItems={checkedItems}
        setCheckedItems={setCheckedItems}
      />
      <Summary inputValue={inputValue} checkedItems={checkedItems} />
    </div>
  );
}

导出默认函数App（）{
常量[inputValue，setInputValue]=React.useState（“”）；
const[checkedItems，setCheckedItems]=React.useState（[]）；
返回(
);
}

---

该问题及其答案不包括如何生成复选框。如果您知道更好的方式为后代构建此问题，请添加评论。请不要只是否决我的问题，因为这对其他学习者没有帮助。非常感谢。这是有道理的。你为什么不把它分成3个部分？如果将代码分成3个部分（文本输入、有序列表和段落），代码会是什么样子（共享状态）？@Believe2014 I updade codesandbox：您更新的代码工作得很好。请你单独回答好吗？我想保留你以前的答案（因为它很棒）。并会将您的新答案标记为已接受。非常感谢。@Believe2014我编辑了我的问题，这里有两个解决方案。