这是我第一次创建React应用程序。
我想将按钮从index.js传递到使用钩子的表组件。
Declaration:
const testButton = () => {
return (
<React.Fragment>
<button>Test1</button>
<button>Test2</button>
<button>Test3</button>
<button>Test4</button>
<button>Test5</button>
</React.Fragment>
);
};
将其传递给表格组件
return (
<React.Fragment>
<TestTable
{...{
testButton}} />
</React.Fragment>
然后,表格组件将使用它来呈现带有包括按钮的表格。
export default function TestTable({
testButton,
...props
})
return (
{testButton});
我做对了吗?
如何从index.js导出,导入到table component.js中并在Table组件中呈现?
谢谢。
答案 0 :(得分:1)
在index.js(返回按钮的位置)中:
export default function TestButtons() {
return (
<>
<button>Test1</button>
<button>Test2</button>
<button>Test3</button>
<button>Test4</button>
<button>Test5</button>
</>
);
}
然后,在您的table.js中:
import TestButtons from 'path/to/index.js'
export default function TestTable() {
return (
<TestButtons />
)
}
您需要使用import语句从另一个文件中导入组件。
答案 1 :(得分:1)
React库促进组件组成。为了更好地记录此模式read Robin Wieruchs article
您可以像下面那样重构TestTable组件:
这里我添加了一个codeandbox示例:https://codesandbox.io/embed/smoosh-cache-ytfky
import React from 'react'
export default function TestTable(props) {
return (
<React.Fragment>
{props.children}
</React.Fragment>
)
}
您的TestButton组件可以基本保持不变。您需要将export关键字添加到组件的开头。实际上,这些组件只是普通的旧功能。 要了解有关导出函数的不同样式的更多信息,请参见Alex Rauschmayer great description。对于使用默认导出还是使用命名导出存在一些争论,我个人更喜欢使用命名导出,它更具声明性,并且更容易理解正在发生的事情。
export default function TestButton() {
return (
<React.Fragment>
<button>Test1</button>
<button>Test2</button>
<button>Test3</button>
<button>Test4</button>
<button>Test5</button>
</React.Fragment>
);
};
您现在可以在另一个函数中组成两个组件,如下所示:
export function DisplayTable(props) {
return (
<TestTable>
<TestButton />
</TestTable>
)
}
注意:
对于React Hooks,它们是自16.8以来对React的新介绍,它真正解决了无需使用类即可处理状态和副作用的特定用例。参见original docs for a great description
答案 2 :(得分:0)
我认为您想要的是:
const TestTable = ({ children }) => {
return (
<table>
<tr>
<td>Something...</td>
<td>{children}</td>
</tr>
</table>
)
}
然后:
const App = () => {
return (
<TestTable>
<button>Test 1</button>
<button>Test 2</button>
<button>Test 3</button>
</TestTable>
)
}
希望有帮助!