Question

我创建了一个组件并将其命名为ReusableButton。
然后，我在Buttons组件中重用了这个ReusableButton。
现在在Buttons Component中，我重复使用了3次此ReusableButton。
然后通过使用道具通过ReusableButton，我将子级传递给Buttons Component。
现在在Buttons组件中，我已经为这三个ReusableButton组件重复使用了ReusableButton三次，我有三个子级的航班，酒店，汽车租赁。

现在我的问题是如何从ReusableButton传递不同的样式给那些孩子，所以请帮助解决这个问题。

还是，如果您不确定我是否有疑问，请在评论中问我谢谢

这是我的App.js从这里开始

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

function App() {
  return (
    <div className="App">
      <Buttons></Buttons>
    </div>
  );
}

export default App;

这是Buttons.js从这里开始

import React, { Component } from 'react';
import './Buttons.css';
import ReusableButton from '../ReusableButton/ReusableButton';

class Buttons extends Component {
    render() {
        return (
            <div className='container'>
                <div className='row'>
                    <ReusableButton>Flights</ReusableButton>
                    <ReusableButton>Hotels</ReusableButton>
                    <ReusableButton>Car Hire</ReusableButton>
                </div>
            </div>
        );
    }
}

export default Buttons;

这是ReusableButton.js，从这里开始

import React, { Component } from 'react';
import './ReusableButton.css';

class ReusableButton extends Component {
    render() {
        return (
            <div className='button'>
                <button className='btn-xs btn-primary customBot'>
                    {this.props.children}
                </button>
            </div>
        );
    }
}

export default ReusableButton;

这是ReusableButton.css

.customBot {
    border: none !important;
}

如何通过使用props将CSS样式传递给另一个组件？

0 个答案: