Как написать и получить доступ к функции в компонентах React без состояния

Question

Я хочу написать и получить доступ к функции / const в стиле CSS с помощью компонента React без сохранения состояния.

Я выполнил приведенную ниже реализацию, но не смог добиться успеха:

const MyComponent = ({ title, data }: Props) => {
  function setPercentageColor() {
    console.log("standard");
    return "#ca2626";
  }
  const percentage = "50";
  return (
    <div className="progress-circle">
      <CircularProgressbar
        percentage={percentage}
        text={percentage}
        styles={{
          root: {},
          path: {
            stroke: "#0080a6",
            strokeWidth: "8",
            transition: "stroke-dashoffset 0.5s ease 0s"
          },
          trail: {
            stroke: setPercentageColor //here I want to access
          },
          text: {
            fill: "#28323c",
            fontSize: "35px",
            fontFamily: "Roboto Regular"
          }
        }}
      />
    </div>
  );
};
export default MyComponent;

Пожалуйста, помогите внапишите правильное решение.

Спасибо

Answer 1

Вы можете получить доступ к своей функции напрямую, вызвав ее.т.е.:

stroke: setPercentageColor()

Вот простой рабочий пример:

const App = () => {
  const setTextColor = () => "#ca2626";
  return (
    <div>
      <Foo
        styles={{ colors: { text: setTextColor(), background: "black" } }}
      />
    </div>
  );
};

const Foo = (props) => {
  const { styles } = props;
  return (
    <div
      style={{
        color: styles.colors.text,
        backgroundColor: styles.colors.background,
      }}
    >
      Foo
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>