Question

我在React中制作了一个简单的待办事项列表。

我有一个用于添加新ToDo项目的组件（例如，名称，标题，日期，地点，描述），以及用于编辑待办事项的另一个组件。

然而，2个组件完全相同，只是编辑组件填充了内容。

我有没有办法简化这个，例如。窝a＆＃34;一般形式＆＃34;编辑和添加组件的组件？我应该研究更高阶的组件吗？

Answer 1

例如，您可以创建renderedTodo组件并传递属性isEditing。内部渲染函数选择适当的组件来渲染

class TodoItem extends React.Component {
    render() {
        const renderedTodo = this.props.isEditing ? (<EditingTodo>) : (<AddingTodo>);
        return (
            <div>
                <div>[Common structure]</div>
                { renderedTodo }
            </div>
        );
    }
}

TodoItem还管理所有常见逻辑，EditingTodo和AddingTodo仅与之相关的逻辑。它们应该是没有任何状态的纯函数，并使用TodoItem中收到的道具来做所有事情。

Modularize React Code：格式相同，功能不同

1 个答案: