React JS中如何使用props优化代码，提升代码整洁度？

1 调整子组件逻辑，从props取值 #

你当前的TodoEnCours子组件直接依赖父组件的todoList状态和switchEnCours方法，耦合度较高，修改组件定义，改为从props参数中读取需要的内容：

function TodoEnCours(props) {
  // 也可以直接解构props，写法更简洁：
  // const { todoList, switchEnCours } = props
  const todoList = props.todoList
  const switchEnCours = props.switchEnCours

  return todoList.map((insertTask, index) => {
    if (insertTask.etat === "en cours") {
      return (
        // 补充列表渲染必填的key属性，避免控制台警告，生产环境建议用任务唯一id替代index
        <div key={index}>
          <p>{insertTask.task}</p>
          <button onClick={() => switchEnCours(insertTask)}>
            {insertTask.etat}
          </button>
        </div>
      );
    } else {
      return <div key={index}></div>;
    }
  });
}

2 父组件调用时传递props #

在父组件渲染TodoEnCours的位置，把对应的数据和方法作为属性传入即可：

<div>
  <input onChange={handleInput}></input>
  <button onClick={AddTask}>Valider</button>
  <div className="DivColonne">
    <div className="Colonne">
      <h1>Tâche à faire</h1>
      {/* 按子组件需要的属性名传递对应值 */}
      <TodoEnCours todoList={todoList} switchEnCours={switchEnCours} />
    </div>
  </div>
</div>

props运行逻辑说明 #

• props是React中父组件向子组件单向传递数据的通道，子组件只能读取props的值，不能直接修改props内容，所有数据变更逻辑都需要在持有对应状态的父组件中执行
• 当父组件传递给子组件的props值发生变化时，子组件会自动重新渲染，同步拿到最新的数据
• props支持传递任意JS类型的数据，包括普通变量、对象、函数、JSX元素等

内容的提问来源于stack exchange，提问作者Xwingoga06