admin管理员组

文章数量:1023773

I am trying to display the product getting the size it should be from a Json database. I am new to react so have tried a few ways and this is what I have been able to do. I tried making a function (FontSize) that creates a variable (percentage) with the value I want before and then tried calling the function in the render in the tag with the product. I am getting no errors but the size of the paragraph tag is not changing.

This is my ponent.

import React, { Component } from 'react';
import { Loading } from './LoadingComponent';
const API = 'http://localhost:3000/products';


class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      isLoading: false,
      error: null,
    };
  }

ponentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong ...');
        }
      })
      .then(data => this.setState({ products: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }






FontSize = () => {

    const { products } = this.state;
    var percentage = products.size + 'px';
    return percentage;
  }


  render() {

  const Prods = () => {
    return (
    <div>
       <div className="row">
           <button onClick={this.sortPrice}>sort by price lower to higher</button>
           <button onClick={this.sortSize}>sort by size small to big</button>
           <button onClick={this.sortId}>sort by Id</button>  
        </div>
            {products.map(product =>
            <div className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize : this.FontSize()}} > {product.face}</p>
                </div>

                <div className="col-3">
                  <p>Date: {product.date} {this.time_ago}</p>
                </div>
            </div> 
            )}
            <p>"~END OF CATALOG~"</p>
      </div>
    );
  };

    const { products, isLoading, error } = this.state;
    if (error) {
      return <p>{error.message}</p>;
    }
    if (isLoading) {
      return  <Loading />;
    }
    return (
      <Prods />

    );
  }
}

export default Products;

What I get in the console using console.log(products)

I am trying to display the product getting the size it should be from a Json database. I am new to react so have tried a few ways and this is what I have been able to do. I tried making a function (FontSize) that creates a variable (percentage) with the value I want before and then tried calling the function in the render in the tag with the product. I am getting no errors but the size of the paragraph tag is not changing.

This is my ponent.

import React, { Component } from 'react';
import { Loading } from './LoadingComponent';
const API = 'http://localhost:3000/products';


class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      isLoading: false,
      error: null,
    };
  }

ponentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong ...');
        }
      })
      .then(data => this.setState({ products: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }






FontSize = () => {

    const { products } = this.state;
    var percentage = products.size + 'px';
    return percentage;
  }


  render() {

  const Prods = () => {
    return (
    <div>
       <div className="row">
           <button onClick={this.sortPrice}>sort by price lower to higher</button>
           <button onClick={this.sortSize}>sort by size small to big</button>
           <button onClick={this.sortId}>sort by Id</button>  
        </div>
            {products.map(product =>
            <div className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize : this.FontSize()}} > {product.face}</p>
                </div>

                <div className="col-3">
                  <p>Date: {product.date} {this.time_ago}</p>
                </div>
            </div> 
            )}
            <p>"~END OF CATALOG~"</p>
      </div>
    );
  };

    const { products, isLoading, error } = this.state;
    if (error) {
      return <p>{error.message}</p>;
    }
    if (isLoading) {
      return  <Loading />;
    }
    return (
      <Prods />

    );
  }
}

export default Products;

What I get in the console using console.log(products)

  • javascript
  • reactjs
Share Improve this question edited Nov 17, 2019 at 19:21 Natasha asked Nov 17, 2019 at 18:37 NatashaNatasha 1032 silver badges10 bronze badges 9
  • A few suggestions: Try using the web inspector to see exactly what is being rendered inside the style attribute. You can also try hard-coding a font size to see if that works, then work backward from there. E.g.: style={{fontSize : '72px'}} – jknotek Commented Nov 17, 2019 at 19:00
  • I used the inspector and the style attribute is not been rendered, but if I hard-code it in style={{fontSize : '72px'}} the style attribute appears in the paragraph tag – Natasha Commented Nov 17, 2019 at 19:08
  • Then it must be an issue with your FontSize function. Try using console.log(products) within the FontSize function, and see what you get. Maybe products doesn't have a size value set? – jknotek Commented Nov 17, 2019 at 19:16
  • I added a picture in my question with what I get in the console. My products has a size value. – Natasha Commented Nov 17, 2019 at 19:22
  • 1 I love you!! this worked but put directly in paragraph tag <p style={{fontSize: ${product.size}px}} > {product.face}</p> – Natasha Commented Nov 17, 2019 at 19:55
 |  Show 4 more ments

1 Answer 1

Reset to default 4

I think you need quotes around your style value to work properly.

With concatenation it would look like this for Example:

style={{gridTemplateRows: "repeat(" + artist.gallery_images.length + ", 100px)"}}

Another general example from React:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

I am trying to display the product getting the size it should be from a Json database. I am new to react so have tried a few ways and this is what I have been able to do. I tried making a function (FontSize) that creates a variable (percentage) with the value I want before and then tried calling the function in the render in the tag with the product. I am getting no errors but the size of the paragraph tag is not changing.

This is my ponent.

import React, { Component } from 'react';
import { Loading } from './LoadingComponent';
const API = 'http://localhost:3000/products';


class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      isLoading: false,
      error: null,
    };
  }

ponentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong ...');
        }
      })
      .then(data => this.setState({ products: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }






FontSize = () => {

    const { products } = this.state;
    var percentage = products.size + 'px';
    return percentage;
  }


  render() {

  const Prods = () => {
    return (
    <div>
       <div className="row">
           <button onClick={this.sortPrice}>sort by price lower to higher</button>
           <button onClick={this.sortSize}>sort by size small to big</button>
           <button onClick={this.sortId}>sort by Id</button>  
        </div>
            {products.map(product =>
            <div className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize : this.FontSize()}} > {product.face}</p>
                </div>

                <div className="col-3">
                  <p>Date: {product.date} {this.time_ago}</p>
                </div>
            </div> 
            )}
            <p>"~END OF CATALOG~"</p>
      </div>
    );
  };

    const { products, isLoading, error } = this.state;
    if (error) {
      return <p>{error.message}</p>;
    }
    if (isLoading) {
      return  <Loading />;
    }
    return (
      <Prods />

    );
  }
}

export default Products;

What I get in the console using console.log(products)

I am trying to display the product getting the size it should be from a Json database. I am new to react so have tried a few ways and this is what I have been able to do. I tried making a function (FontSize) that creates a variable (percentage) with the value I want before and then tried calling the function in the render in the tag with the product. I am getting no errors but the size of the paragraph tag is not changing.

This is my ponent.

import React, { Component } from 'react';
import { Loading } from './LoadingComponent';
const API = 'http://localhost:3000/products';


class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      isLoading: false,
      error: null,
    };
  }

ponentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong ...');
        }
      })
      .then(data => this.setState({ products: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }






FontSize = () => {

    const { products } = this.state;
    var percentage = products.size + 'px';
    return percentage;
  }


  render() {

  const Prods = () => {
    return (
    <div>
       <div className="row">
           <button onClick={this.sortPrice}>sort by price lower to higher</button>
           <button onClick={this.sortSize}>sort by size small to big</button>
           <button onClick={this.sortId}>sort by Id</button>  
        </div>
            {products.map(product =>
            <div className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize : this.FontSize()}} > {product.face}</p>
                </div>

                <div className="col-3">
                  <p>Date: {product.date} {this.time_ago}</p>
                </div>
            </div> 
            )}
            <p>"~END OF CATALOG~"</p>
      </div>
    );
  };

    const { products, isLoading, error } = this.state;
    if (error) {
      return <p>{error.message}</p>;
    }
    if (isLoading) {
      return  <Loading />;
    }
    return (
      <Prods />

    );
  }
}

export default Products;

What I get in the console using console.log(products)

  • javascript
  • reactjs
Share Improve this question edited Nov 17, 2019 at 19:21 Natasha asked Nov 17, 2019 at 18:37 NatashaNatasha 1032 silver badges10 bronze badges 9
  • A few suggestions: Try using the web inspector to see exactly what is being rendered inside the style attribute. You can also try hard-coding a font size to see if that works, then work backward from there. E.g.: style={{fontSize : '72px'}} – jknotek Commented Nov 17, 2019 at 19:00
  • I used the inspector and the style attribute is not been rendered, but if I hard-code it in style={{fontSize : '72px'}} the style attribute appears in the paragraph tag – Natasha Commented Nov 17, 2019 at 19:08
  • Then it must be an issue with your FontSize function. Try using console.log(products) within the FontSize function, and see what you get. Maybe products doesn't have a size value set? – jknotek Commented Nov 17, 2019 at 19:16
  • I added a picture in my question with what I get in the console. My products has a size value. – Natasha Commented Nov 17, 2019 at 19:22
  • 1 I love you!! this worked but put directly in paragraph tag <p style={{fontSize: ${product.size}px}} > {product.face}</p> – Natasha Commented Nov 17, 2019 at 19:55
 |  Show 4 more ments

1 Answer 1

Reset to default 4

I think you need quotes around your style value to work properly.

With concatenation it would look like this for Example:

style={{gridTemplateRows: "repeat(" + artist.gallery_images.length + ", 100px)"}}

Another general example from React:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

本文标签： javascriptReact inline style with a variable from a functionStack Overflow

版权声明：本文标题：javascript - React inline style with a variable from a function - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745531854a2154786.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。