Question

我正在从事React项目，在这个项目中，我有App.js，它是Child.js的父级。我已经在Child.js中编写了一些文本，并对文本应用了一些样式。然后我在App.js中重用了两次Child.js组件。

现在相同的文本将在App.js中重复两次，但是我必须更改第二个组件的文本。无需创建额外的组件

这是App.js

import React from 'react;
import './App.css';
import './Child/Child';

function App() {
return(
<div className='App'>
<Child/>
<Child/>

</div>

export default App

这是Child.js

import React from 'react';
import './Child.css';


function Child() {
    return (
        <div className='h4content'>
            <h4>Create An Account</h4>
        </div>
    )
}

export default Child

这是Child.css

@media only screen and (max-width:576px) {
    .h4content {
        text-align: center;
    }

}


.h4content h4 {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    color: #000;
}

.h4content {
    margin-top: 4% !important;
}

如有任何疑问，请发表评论

Answer 1

您可以将文本作为 prop 传递给孩子：

import React from 'react;
import './App.css';
import './Child/Child';

function App() {
return(
<div className='App'>
<Child text={'Text for child #1'}/>
<Child text={'Text for child #2'}/>

</div>

export default App

，然后在子级中访问它们：

import React from 'react';
import './Child.css';


function Child(props) {
    return (
        <div className='h4content'>
            <h4>{props.text}</h4>
        </div>
    )
}

export default Child

在反应中重用组件时如何更改文本？

1 个答案: