reactjs - 将对象简写作为 props 传递到 React 组件中的方法是什么?

标签 reactjs jsx

如何将对象简写作为 props 传递到 React 组件中以减少相同命名 key 对的冗余重复?

以下是我想避免的事情的示例:

const Comp = ( {a, b, c, d} ) => {
    return (
        <div>
            <SubComp
                a={a}
                b={c}
                d={d}
            />
           <AnotherSubComp
                a={a}
                c={c}
            />
        </div>
    ) 
}; 

我想要的东西:

const Comp = ( {a, b, c, d} ) => {
    return (
        <div>
           <SubComp {a, c, d} />
           <AnotherSubComp {a, c} />
        </div>
    ) 
}; 

扩展运算符在这里不是一个选项,并且创建中间对象根本不会减少额外的代码。

最佳答案

您可以在此处使用展开运算符,如下所示:

const Comp = ( {a, b, c, d} ) => {
    return (
        <div>
           <SubComp {...{a, c, d}} />
           <AnotherSubComp {...{a, c}} />
        </div>
    ) 
}; 

关于reactjs - 将对象简写作为 props 传递到 React 组件中的方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41445186/

相关文章:

reactjs - React useState - 我应该如何使用 setter 函数?

javascript - JS React 如何查看歌曲当前时间并进行倒计时?

javascript - 在 React Child 中访问要映射到数组的 Props?

javascript - react : Warning: Can't perform a React state update on an unmounted component

javascript - React App 长时间运行 ajax

javascript - redux 可以被视为 pub/sub 或观察者模式吗?

javascript - Plunker 在几天前有效的脚本上给我 404

html - 使用 React 将多个 html 元素存储在变量中

javascript - React Native 中的过早列表排序

javascript - ESLint 希望 setSate 作为 useEffect 的依赖项,但这会导致无限循环(react-hooks/exhaustive-deps)