需要打印的通过价值

2024-05-19 • 问答

我想用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,10)
        <div/>
    )
}

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

通往成功之路的第一步是，您在myFunction函数中接受三个参数。

这就是正确的反应组件的样子

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函数一样。写也是反应的一部分。

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

我希望这可以解决您的问题。为了更好地理解如何编写React组件，我强烈建议在official react documentation中阅读有关此主题的更多详细信息。

我相信为了在要使用的html标记内传递参数，请使用模板文字。因此您的代码看起来像

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

需要打印的通过价值

chen321123bin1 回答：需要打印的通过价值

大家都在问