如何在 React 中返回可设置的常量

Question

I try to write a function const who can return something like a const, bellow the goal.

const button_style = {
  width: "100px",
  height: "100px",
}

but where I can inject a modificable variable, but I don't find how write that in jsx. You can find bellow my differents fails. Is it possible ?

const set_button_style = () => {
  let w = 100
  let h = 100
  return ({ width: `${w}px`, height: `${h}px` });
}

const set_button_style = () => {
  let w = 100
  let h = 100
  return <div>{{ width: `${w}px`, height: `${h}px` }}</div>
}

at the end I try to do something like that :

function Cell({ children }) {
  return (
    <div>
      <button
        onClick={() => toggle_cell()}
        className="cell"
        // style={button_style}
        style={set_button_style}
        // style={{ width: `${w}px`, height: `${h}px` }}
      >
        {<Img fluid={children.childImageSharp.fluid} />}
      </button>
    </div>
  )
}

Answer 1

Try the following:

const set_button_style = () => {
  let w = 100
  let h = 100
  return { width: `${w}px`, height: `${h}px` };
};

function Cell({ children }) {
  const buttonStyles = set_button_style();
  return (
    <div>
      <button
        onClick={() => toggle_cell()}
        className="cell"
        style={set_button_style}
      >
        {<Img fluid={children.childImageSharp.fluid} />}
      </button>
    </div>
  )
}

Here is an example in action.

Hopefully that helps.