发行需要打印的传递值

Question

我想调用一个有 3 个输入的函数。其中 2 个是数字，一个是字符串。这两个数字进一步传递，但这不是问题。我希望在元素中打印字符串。

我认为这是将参数传递给代码的 html 部分的问题，但我不知道该怎么做。

import Typography from '@material-ui/core/Typography';    


export function myfunction(name, min max){
    const midpoint = Math.ceil((min + max)/2)
    return(
    <div>
        <Typography id="input-slider">
            name //this is where I want name to be
        </Typography>
    <div/>
    )
}

在第二个文件中我称之为

function main(){
    return(
        <div>
            {myfunction(MYNAME, 0, 10)
        <div/>
    )
}

Answer 1

我相信为了在 html 标签中传递参数，您需要使用模板文字。所以你的代码看起来像

export function myfunction(name, min max){
    const midpoint = Math.ceil((min + max)/2)
    return(
    <div>
        <Typography id="input-slider">
            ${name}
        </Typography>
    <div/>
    )
}

Answer 2

您正在定义一个函数 myFunction，它是一个 React 组件。 React 组件基本上只是一个接受属性对象作为第一个参数和 returns JSX（html 用于 React）的函数。

通往成功之路的第一块小石头是您在 myFunction 函数中接受三个参数。

下面是正确的 React 组件的样子

function MyAwesomeComponent({ name, min, max }) {
  const midpoint = Math.ceil((min + max) / 2);
  // use curly brackets around a variable as in {midpoint} to print the value
  return <Typography id='input-slider'>{name}</Typography>;
}

如果我们想在另一个 React 组件中使用它，就像您使用 main 函数一样。 Write 也是一个 React 组件。

function Main() {
  return <MyAwesomeComponent name={'YourName'} min={0} max={10} />;
}

希望这能解决您的问题。为了更好地理解如何编写 React 组件，我强烈建议您阅读 official react documentation.

中有关此主题的更多详细信息

发行需要打印的传递值

Issue Passing Value that Needs to be Printed

javascript

pass-by-value

material-ui