Question

*我想将React.Element的className作为来自组件的道具传递，我是新的react。我可以通过类名作为道具吗？我正在尝试实现动态主题更改，在这里我可以传递不同的道具和chnage组件外观。

      css 
    <style>
    .c1 {
        color: red
    }
    .c2 {
        color: teal
    }

    </style>

//  code does not works 

const Comp = ( props) =>  <h1 {props.className}  > Hello , World </h1> 

ReactDOM.render(<Comp className="c1"/> , 
document.getElementById("root"))

  // but this code works 

  const Comp2 = (props) => <h1 className="c1" > Hello , World </h1> 
  ReactDOM.render(<Comp2 />, document.getElementById("root"))

Answer 1

您需要将prop的动态类名作为-传递给元素-

<h1 className={props.classname} > Hello , World </h1> 
ReactDOM.render(<Comp2 classname='c1'/>, document.getElementById("root"))

Answer 2

您必须像下面这样通过className作为prop：

const Comp = props => <h1 className={this.props.className}>Hello World</h1>

Answer 3

当您将className="c1"传递到Comp2组件时，您快到了，您只需要具有className属性就可以将此props保留为

const Comp = ( props) =>  <h1 className={props.className}  > Hello , World </h1> 


ReactDOM.render(<Comp className="c1"/> , document.getElementById('root'));

Demo

如何通过className作为道具？

3 个答案: