Выпуск, передавая стоимость, которая должна быть напечатана - PullRequest
Новая
       39

Выпуск, передавая стоимость, которая должна быть напечатана

0 голосов
/ 06 ноября 2019

Я хочу вызвать функцию с 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/>
    )
}

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Вы определяете функцию myFunction, которая является компонентом реакции. Компонент реагирования - это просто функция, которая принимает объект свойств в качестве первого аргумента и возвращает JSX (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>;
}

Если мы хотим использовать его в другом компоненте реакции, как вы это делаете с функцией main. Запись также является компонентом реакции. 

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

Надеюсь, это решит вашу проблему. Для лучшего понимания того, как писать компоненты реагирования, я настоятельно рекомендую прочитать более подробно об этой теме в официальной документации .

0 голосов
/ 06 ноября 2019

Я считаю, что для передачи параметра в HTML-теги, которые вы хотите использовать, используйте шаблонный литерал. Таким образом, ваш код будет выглядеть как 

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