我在类组件和无状态功能组件之间有问题吗？

Question

app.js

import React from 'react';
import Header from './Header';
class App extends React.Component{
  render(){
    return(
      <Header />
    )
  }
}

export default App;

Header.js

import React from 'react'
const colorText = (props) => {
     const styles = {
         fontFamily : `${props.color}`
     }
}
class Header extends React.Component{
  constructor(props){
      super(props);
  }
  render(){
      return(
          <header >
             <colorText style = {styles}/>
              <p color = 'red'>Fo Fine!</p>
              <p color = 'green'>By Khoa-VoDuc</p>
              <p color = 'blue'>Great For QuilTing & Sewing</p>
          </header>
      )
      } 
    }
export default Header;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

错误

错误：'styles' 未定义 no-undef 。

我无法在类 Header 的渲染方法中访问 c​​olorText 函数。我想在屏幕上显示标签 p 中的这些文本，上面有三种颜色。

Answer 1

styles 实际上并没有在Header.js 中定义。如果要在该文件上使用colorText 函数中定义的style，则必须先调用它：

import React from 'react';

const colorText = (color = 'inherit') => {
  const styles = {
    color,
    fontFamily: 'monospace',
  };

  // This `return` here is missing:
  return styles; 
};

class Header extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <header>
         { /*
           `colorText` return an object with a `color` prop, so you would
           assign that to the `style` attribute of some HTML element, not
           call it as a component as you were doing before.

           So this doesn't make sense because 1) `colorText` is not a
           component and 2) where have you defined this `styles` variable?:

           <colorText style={ styles } />

           Instead, use it like this:
         */ }

         <p style={ colorText('red') }>Fo Fine!</p>
         <p style={ colorText('green') }>By Khoa-VoDuc</p>
         <p style={ colorText('blue') }>Great For QuilTing & Sewing</p>
      </header>
    );
  }
}

export default Header;